一、计算属性(computed)
1、说明
当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护
computed主要的作用:
- 分离逻辑(模板和数据分离)
- 缓存值
- 双向绑定(getter,setter)
2、语法格式
-
格式
computed:{ [key: string]: Function | { get: Function, set: Function } } -
参数说明
-
key
字符串类型
-
值
可以是一个方法,如果是方法默认是get操作,也可以是对象 ,设置get属性或者set属性
-
3、基础用法
-
说明
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果,
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新,适用于比较费时的数据计算
-
示例代码
<div id="app"> <!--使用表达式的方式--> <p v-text="originalPrice - discountPrice"></p> <!--使用计算属性的方式--> <p v-text="currentPrice"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { id:1, originalPrice:1200, discountPrice:200, }, //计算属性 computed: { // 把日期换成 常见规格格式的字符串。 currentPrice: function () { return "当前价格:" + (this.originalPrice - this.discountPrice); } } });
4、setter与getter
-
说明
每一个计算属性都包含一个getter 和一个setter，上面的示例都是计算属性的默认用法， 只是利用了getter来读取
如果需要，也可以提供一个setter 函数， 当修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数
-
示例代码
<div id="app1"> <p v-text="currentPrice"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { id: 1, originalPrice: 1200, discountPrice: 200, }, //计算属性 computed: { cache:false, // 把日期换成 常见规格格式的字符串。 currentPrice: { get: function () { return "当前价格:" + (this.originalPrice - this.discountPrice); }, // 注意必须要传递参数,否则没有意义 set: function (value) { //执行自定义的一下操作 this.discountPrice = value } } } }); </script> <!-- 在 console 中 输入 app.currentPrice=300 1> 先执行get方法改变discountPrice的值 2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法 --> -
注意
绝大多数情况下，我们只会用默认的
getter方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法
5、缓存
-
说明
计算属性基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖
什么是响应式依赖，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行
getter/setter转化过程，所以属性必须在data对象上存在才能让 Vue 转换它，这样才能让它是响应 -
示例代码
<!-- 响应式依赖 --> <script> var vm = new Vue({ data: { // 声明 message 为一个空值字符串 message: '' }, }) // 响应式 vm.message = 'Hello!' vm.v="非响应式的的值" </script><div id="app"> <button @click="getMethodsDate">methods</button> <button @click="getComputedDate">computed带缓存</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', methods: { getMethodsDate: function () { console.log(new Date().toLocaleTimeString()) }, // 返回computed选项中设置的计算属性——computedDate getComputedDate: function () { console.log("缓存--->" + this.computedDate) } }, computed: { computedDate: function () { return new Date().toLocaleTimeString() } } }) </script>
6、与methods的区别
-
computed`只有符合：存在依赖型数据，依赖型数据发生改变这两个条件，computed才会重新计算。
而methods下的数据，是每次都会进行计算的
-
调用方式不一样，
computed定义的成员像属性一样访问，而
methods定义的成员必须以函数形式调用。 -
computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而
methods里的函数在每次调用时都要执行。
五、侦听器(watch)
1、说明
官方:当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态
watch和我们前面介绍的methods相同的语法，但是有一个关键的区别。虽然嵌套属性的值确实是函数，但键的名称必须对应数据属性中的名称
2、语法格式
watch:{ [key: string]: string | Function | Object }]
3、语法说明
-
key
必须是Vue对象data中定义的属性
-
值
- 值可以是一个字符串，这个字符串是方法名
- 值可以是一个函数
- 值也可以是一个对象，其中包含回调函数可以其他选项：比如是否深度遍历。
4、基础使用
-
示例代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ data: { test: "111", user: { name: "码帝", address: { city: "大武汉" } } }, methods: { fun: function (val) { alert(val) } }, watch: { // 方法名方式 对应 methods中的函数名 // test: 'fun', // 函数方式 test: function (v1, v2) { alert("新值" + v1 + "====旧值:" + v2) }, /** *什么是深度 例如 data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}} * user属性对应值就是深层,一次内推 * 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听 */ // user: { handler: function (val) { alert(val.name) }, // 是否深度监听 默认是false // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的 deep: true }, /** * 或者也可以使用下面的方式来监听 * 注意键值必须是一个字符串，所以用引号括起来 * */ "user.address.city": function (val) { alert(val) } } }); vm.test = '333'; vm.user.name = "撸帝"; vm.user.address.city = '长沙'<div id="app"> <input type="text" v-model="search"/> <ul> <li v-for="result in results" v-text="result"></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { user:{ name:"码帝", } search: "", results: [], }, methods: { fun: function () { alert("111"); } } watch: { // 使用函数 search: function (v1, v2) { console.log('新值: %s, 旧值: %s', v1, v2) this.results.push(v1) } } }) </script>
5、与computed的区别
- 触发条件不同
- computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。
- watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。
- 应用场景不同
- 执行异步操作，开销较大的操作，避免堵塞主线程，使用watch。
- 简单且串行返回的，使用computed
作者：杨健kimyeung