const vm = new Vue({
el:"#app",
data:{
num:1
},
methods:{ // 数据变化
handle(){
this.num++
}
},
watch:{
num:{ // 监听数据
handler(){ //数据发生变化时 会触发handler函数
console.log(12)
},
deep:true //深度监听
}
},
})
在局部的watch中 监听的函数 参数是没有改变的数据 和改变后的数据
有两个参数 [触发函数 | 深度监听]
数据是数字或者字符串 变化时会触发监听 渲染页面
数据是Arr 不用七大数组方法 不会触发监听 不会渲染到页面
深度deep:true也不行
数据是对象 直接点属性赋值 需要添加 deep:true 才会触发监听
没有添加 不会触发监听 会渲染数据
在vue文档中 所有对象都要添加deep:true才会被监听到
对象在被监听可以整个对象 也可以是单个数据
在全局的Vue.
w
a
c
t
h
l
e
t
f
u
n
=
V
u
e
.
wacth let fun = Vue.
wacthletfun=Vue.watch( [obj|arr|num|str],callback,{} )
全局函数会返回一个取消监听的函数 执行fun() 会取消监视
参数中的对象{
deep:true ,
immediate:true //vue实列加载时执行一监听
}