Composition API 监听属性

watchEffect

<script>
import {ref,watchEffect} from 'vue'
export default {name: 'HelloWorld',props: {msg: String},setup(){const count = ref(0)const stop = watchEffect(()=>{//立即执行，没有immediate//自动感应代码的依赖,只需要传一个回调函数//可以通过调用它的返回值来停止侦听器console.log(count.value)})setInterval(() => {count.value++}, 1000);return{count,stop}}
}
</script>

watch

<script>
import {ref,watchEffect,reactive,watch} from 'vue'
export default {name: 'HelloWorld',props: {msg: String},setup(){const count = ref(0)//直接这样写类似watchEffect,创建时自己调用var stop = watch(()=>{console.log(count.value)})//指定数据,传入三个参数,(要监听的属性,回调函数,属性对象)var stop = watch(count,(val,oval)=>{//回调函数接收两个参数,旧值,新值console.log(val,oval)},{immediate:true//默认创建不会自己调用,设置true来让它创建自动调用})//setInterval(() => {count.value++}, 1000);return{count,stop,}}
}
</script>

监听对象

<script>
import {ref,watchEffect,reactive,watch,toRefs} from 'vue'
export default {name: 'HelloWorld',props: {msg: String},setup(){const user = reactive({id:1010,name:'张三'})var stop = watch(user,(val,oval)=>{console.log(val.id,oval)//这样访问},{immediate:true,deep:true//深度监听(侦听某个对象具体的值，必须开启深度侦听，否则侦听不到值)})return{user,stop,}}
}
</script>

监听对象中的单个属性

    var stop = watch(()=>user.id,(val,oval)=>{console.log(val,oval)},{immediate:true,//deep:true})
//相当于这样,()=>就是将属性转换成了ref,回调函数传入的参数默认会换成别的格式setup(){const user = reactive({id:1010,name:'张三'})let num = toRefs(user)var stop = watch(num.id,(val,oval)=>{console.log(val,oval)},{immediate:true,//deep:true})

监听多个属性

//用数组的形式,回调函数中参数,第一个数组中的是新值,第二个数组中是旧值var stop = watch([()=>user.id,()=>user.name],([id,name],[oid,oname])=>{console.log(id,name)},{immediate:true,//deep:true})

Composition API 监听属性相关推荐

Vue计算属性和监听属性
一.计算属性计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app">{{ messa ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
vue 组件属性监听_Vue.js 监听属性
# Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: ~~~ Vue 测试实例 - 菜鸟教程(runoob.com) ...
Vue.js：监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
VUE之监听属性 watch
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
Vue如何正确使用watch监听属性变化
Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应.但一旦涉及到复杂数据的监听(如Object,但数组一般不需要,因为Vue针对数组做了特殊处理)时就比较复杂了,本文解释了使用watch监听 ...
Vue监听器的基本使用(监听属性-深度监听和立即执行)
一:vue监听器-基本使用语法是: watch: {"被监听的属性名" (newVal, oldVal){}} 方便理解,示例代码: <template><di ...
Vue 计算属性与监听属性
前面的话模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护.这篇文章将介绍计算属性与监听属性去解决该问题. 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <d ...

Composition API 监听属性

Composition API 监听属性相关推荐

最新文章

热门文章