Vue的计算属性computed和监听属性watch
Vue
Vue的计算属性computed
定义
通过已有属性计算生成一个新的组合属性。
原理
底层借助了Object.defineproperty方法提供的getter和setter来实现。
性质
计算属性的代码内容是方法,但在Vue中它是属于Vue的一个属性。
计算属性大多数情况下是不会对其修改的,所以只考虑读取不考虑更改时set方法可以不写,进而只有get方法,这时的计算属性就可以进行简写
监听属性watch
监听属性watch
1 当被监听的属性发生变化时 回调函数自动调用 进行相关的操作
2 监听的属性必须存在才能够进行监听
3 监听两种写法
(1) new Vue时直接书写watch配置
(2) 通过(vue实例名.
w
a
t
c
h
(
′
监
听
的
属
性
名
′
)
此
处
实
例
名
为
v
m
,
注
意
,
此
处
括
号
里
的
属
性
名
需
要
加
引
号
)
v
m
.
watch('监听的属性名') 此处实例名为vm,注意,此处括号里的属性名需要加引号) vm.
watch(′监听的属性名′)此处实例名为vm,注意,此处括号里的属性名需要加引号)vm.watch(‘监听的属性名’)
运行到浏览器:
点击’ 改变日期 按钮观察控制台变化
immediate属性控制监听中的handler是否在初始化就会执行,默认为false,如果更改为true,则handler在vue实例初始化时就会执行
此处旧值处为undefined,因为初始化时就会加载,所以直接将原有值当做新值,原有的值此处当做不存在处理
深度监视
当属性值中还有嵌套的属性值时,此时还可以监听吗? 下面来试试
此时我们点击x++按钮和y++按钮更改x和y的值,因为上面定义时,x和y是num的属性,我们更改x和y观察num有没有被监听到更改:
此时num内部属性虽然更改了,但是vue却没有监听到num的更改,
此时就需要在监听中书写下一层级的监听
此时再在页面中更改x和y的值
此处可以直接这样写:
深度监听:
(1) vue中的watch默认不检测对象内部值得改变(只监听一层)
(2) 配置deep:true 可以开启检测对象内部值得改变(多层)
(3) vue自身可以监听对象内部值得改变 但是vue提供的watch默认不可以
(4) 使用watch时根据数据的具体结构 决定是否采用深度监听
监听简写:
当我们要监听的数据只需要handler配置时,可以进行监听的简写:
初始化实例后的简写方式:
computed和watch区别:
1 computed能完成的功能 watch都可以完成
2 watch能完成的功能 computed不一定可以完成 比如 watch可以进行异步操作(如定时操作)
两个重要小原则:
1 所有被vue管理的函数 最好写成普通函数 这样this的指向才会是vue实例或组件实例对象
2 所有不被vue管理的函数(定时器的回调函数 ajax的回调函数 Promise的回调函数) 最好写成箭头函数=>(),这样this的指向才是vue实例或组件实例对象
更多推荐
所有评论(0)