一、计算属性
1. 姓名案例 —— 插值语法实现
<div id="root"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> {{firstName}}{{lastName}} </div> const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三' } })
2. 姓名案例 —— methods实现
<div id="root"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> 全名：{{fullName()}} </div> const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, methods:{ fullName(){ return this.firstName + this.lastName } } })
3. 姓名案例 —— 计算属性实现
- 什么是计算属性？
要用的属性不存在，要通过已有属性计算得来。
原理是什么？
底层借助了 Object.defineproperty 方法提供 getter 和 setter。
get 什么时候执行？
初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。
有什么优势？
与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。
注意点：
计算属性最终会出现在 vm 上，直接读取使用即可。
如果计算属性要被修改，那必须写 set函数 去响应修改，且要引起计算时依赖的数据发生改变。
<div id="root"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> 全名：{{fullName}} </div> const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, computed: { fullName: { get(){ return this.firstName + this.lastName }, set(value){ console.log('set被调用了', value); const arr = value.split('-') //把输入的姓名以-为表示分隔开 (比如：李-四) this.firstName = arr[0] //李 this.lastName = arr[1] //四 } } } })
4. 姓名案例 —— 计算属性实现（简写方式）
当不用 set 时可以简写。
<div id="root"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> 全名：{{fullName}} </div> const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, computed: { fullName(){ return this.firstName + this.lastName } } })
二、监听属性
1. 天气案例（计算属性实现）
- 利用 methods 里面的方法来控制 isHot 的布尔值。
- 利用计算属性，以 isHot 的布尔值为标准，写三元表达式来改变天气。
<div id="root"> <h1>今天天气很{{info}}</h1> <button @click="changeWeather">点击切换</button> </div> const vm = new Vue({ el: '#root', data: { isHot: true }, methods:{ changeWeather(){ this.isHot = !this.isHot } }, computed: { info(){ return this.isHot ? '炎热' : '凉爽' } } })
2. 天气案例（监视属性实现）
当被监视的属性变化时，回调函数自动调用，进行相关操作。
监视的属性必须存在，才能进行监视。
监视的两种写法：
(1). new Vue时传入watch配置
(2). 通过vm.$watch监视
immediate：该值默认是 false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行 handler 中的操作。
handler：是 watch 中需要具体执行的方法。
<div id="root"> <h1>今天天气很{{info}}</h1> <button @click="changeWeather">点击切换天气</button> </div> const vm = new Vue({ el: '#root', data: function () { return { isHot: true } }, methods: { changeWeather() { this.isHot = !this.isHot } }, computed: { info() { return this.isHot ? '炎热' : '凉爽' } }, watch: { isHot: { immediate: true, //首次加载时调用 handler(newValue, oldValue) { console.log('天气被修改了', newValue, oldValue) } } } })
3. 深度监视（deep）
deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化，数组字符串一般不需要。
<div id="root"> <h2>a 的值是：{{numbers.a}}</h2> <button @click="numbers.a++">点我 a+1</button> <h2>b 的值是：{{numbers.b}}</h2> <button @click="numbers.b++">点我 b+1</button> </div> const vm = new Vue({ el: '#root', data: function () { return { numbers: { a: 0, b: 0 } } }, watch: { numbers:{ deep: true, handler(){ console.log('number改变了') } } } })
4. 天气案例（监视属性简写）
简写方式
<div id="root"> <h1>今天天气很{{info}}</h1> <button @click="changeWeather">点击切换天气</button> </div> const vm = new Vue({ el: '#root', data: function () { return { isHot: true } }, methods: { changeWeather() { this.isHot = !this.isHot } }, computed: { info() { return this.isHot ? '炎热' : '凉爽' } }, watch: { isHot(newValue, oldValue){ console.log('isHot被修改了', newValue, oldValue) } } })
5. 姓名案例（watch监听实现）
computed 和 watch 之间的区别：
- computed 能完成的功能，watch 都可以完成。
- watch 能完成的功能，computed 不一定能完成，例如：watch可以进行异步操作。
两个注意点：
所有被 Vue 管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象。
所有不被 Vue 所管理的函数 ( 定时器的回调函数、ajax的回调函数等 )，最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象。
实例：使用 watch 开启异步任务（延迟效果）：第一个文本框输入的内容，会延迟 1s 呈现在页面，第二个文本框输入的内容，立即呈现。
<div id="root"> 姓：<input type="text" v-model="firstName"><br /> 名：<input type="text" v-model="lastName"><br /> 全名：<span>{{fullName}}</span> </div> const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, watch: { //watch内可以开启异步任务(如延迟显示)，而computed中不可以(因为计算属性中要的就是返回值) firstName(val) { setTimeout(() => { this.fullName = val + '-' + this.lastName }, 1000) }, lastName(val) { setTimeout(() => { this.fullName = this.firstName + '-' + val }) }, } })
不积跬步无以至千里 不积小流无以成江海
