vue|前端之vue计算属性与监视属性 vue.js|前端

vue计算属性与监听属性

计算属性 computed
监听属性 watch（又名侦听属性）
- @事件="方法"
- 监听属性 (watch)的两种写法
- 深度监听(用`deep:true`监听多级结构变化)
- 简写监听属性
计算属性与监听属性的区别

计算属性 computed

文章图片

【vue|前端之vue计算属性与监视属性】data内的是属性
计算属性是用data内的属性经过计算得到的新属性。
计算属性：初次读取和依赖数据改变读取。
计算属性：obj 是对象格式，get（）返回值就是computed内的obj对象的值；set（）通过传入的值修改依赖项来修改obj的值。
完整写法：（对象：get、set）

computed: { fullName: { get() { // 读取 return this.lastName + '-' + this.firstName; }, set(value) { // 修改 -- 大都是用来呈现,没必要写set const arr = value.split('-'); this.firstName = arr[1]; this.lastName = arr[0]; } } }

大多数computed属性都是用来呈现,没必要写set；
确定只是用来呈现的就可以用简写形式：
简写：（函数写法，返回值就是结果）

computed: { fullName() { return this.lastName + '-' + this.firstName; } }

监听属性 watch（又名侦听属性）其实就是监听属性的变化，而computed测重数据依赖项的变化
产生的结果
@事件=“方法” 若方法只是简单一句改变:

但凡有两个属性变化(都应该写到方法里):

methods: { changeWeather() { this.isHot = !this.isHot; } },

监听属性 (watch)的两种写法监听对象包括data、computed内的属性，当监听对象修改后调用handler（）函数。
写法1：
回调函数handler,参数列表第一个位置无论是什么名字都是新值,第二个位置就是旧值

watch: { isHot: { // immediate: true, // 初始化时就调用处理函数handler一次 handler(newValue, oldValue) { // 回调函数,参数列表第一个位置无论是什么名字都是新值,第二个位置就是旧值 console.log('isHot被修改了', newValue, oldValue); } } }

immediate: true, // 初始化时就调用handler一次
写法2：

const vm = new Vue({}); vm.$watch('isHot', { handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue); } })

深度监听(用deep:true监听多级结构变化) eg：对象中的属性

文章图片

在watch中使用:

deep：true

eg:

const vm = new Vue({ el: '#root', data() { return { numbers: {//多级结构 a: 1, } } }, methods: { changeWeather() { this.isHot = !this.isHot; } },watch: { numbers: { deep: true,//深度监听 handler() { console.log('numbers改变了') } },'numbers.a': { handler() { console.log('numbers.a改变了'); } } }})

简写监听属性计算属性只有getshi时，简写
监听属性内部只用handler函数时适用

watch: { isHot(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue); } },

简写方式与computed相同，都是将对象（内含属性方法）的形式改成函数形式；简写的代价是不能添加初始化调用immediate:true和深度监视deep:true
计算属性与监听属性的区别个人理解：
计算属性相当于用Vue的n个属性得出的一个结果，用Vue的实例代理。
监听属性修改的属性要在Vue实例中有定义
尚硅谷：
监听属性可以开启异步任务（eg：用setTimeout开启延迟一秒后执行handler函数）