Vue中computed和watch属性的区别
Vue结合computed实现搜索和排序Demo效果图
一、什么是computed计算属性?
1.1 computed 和 watch 的区别 和 使用场景
1.1.1 computed 计算属性
- 可以在里面公告少量函数 必需有
return值 - 计算属性函数中假如用到了Vue实例data中的数据 这些数据发生改变后就会重新执行这个计算属性函数 将最新的计算属性结果返回出去
- 执行时机: 初始化显示执行，函数中用到了Vue实例data中的数据发生改变后会重新执行计算
- 页面中使用计算属性: 在页面中直接用插值表达式(八字胡语法||胡子语法)使用计算属性(
{{计算属性函数名}}) - 本质: 计算属性本质就是一个方法 但是使用的时候这些方法的方法名当作属性名使用 计算属性的值就是方法中return出来的值
- getter 和 setter :
使用 get 和 set 函数需要把原价的计算属性函数改成计算属性对象
计算属性默认执行get方法(需要return计算属性的结果) (根据相关的数据计算并返回当前属性的值)
当计算属性值自身发生改变后执行set方法
可以用get和set方法来实现少量计算税前和税后的互推算
- 计算属性缓存: 计算属性存在缓存 屡次读取计算属性的值只执行一次getter计算
缓存机制 => {计算属性名:数据结果} 以键值对的数据格式进行缓存
1.1.2 watch 监听属性
- 可以监听data中的属性和少量非DOM元素的改变
- 可以获取数据改变前的值和改变后的值
形参(newVal,oldVal)=>(改变后的值,改变前的值) - 监听路由 hash
watch: { // watch里面的 $router 这些对象前面不要带this "$route.path"(newVal, oldVal) { if (newVal.indexOf("/login") >= 0) { this.welcom = "欢迎登陆"; } if (newVal.indexOf("/register") >= 0) { this.welcom = "欢迎注册"; } } }1.1.3 watch和computed的区别
- watch里面的方法只能对那个方法名的属性名做监听
- computed里面可以对那个方法中所有使用到了的data中的属性名做监听
- watch里面毋庸return
- computed需要return
一般computed比watch用的更多
Xmind图例
二、Vue结合computed实现搜索和排序
从不废话的小蓝直接上代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="搜索姓名" /> <br /> <ul> <li v-for="(item, index) in fillNameList" :key="index"> {{ index }} -- {{ item.name }} -- {{ item.age }} </li> </ul> <button @click="sorting=1">年龄升序</button> <button @click="sorting=2">年龄降序</button> <button @click="sorting=0">本来顺序</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { name: "", nameList: [ { name: "Tom", age: 18 }, { name: "Bob", age: 19 }, { name: "Rose", age: 17 }, { name: "Bem", age: 20 } ], // 排序 sorting: 0 // 0 本来顺序 ， 1 升序 ， 2 降序 }, computed: { fillNameList: { get() { const { nameList, name, sorting } = this; // 新数组 let fillList = nameList.filter( val => val.name.indexOf(name) != -1 ); // 排序 if (sorting !== 0) { fillList.sort((a, b) => { // 假如返回负数 a在前(降序) 假如返回正数 b在前(升序) // 升序 if (sorting === 1) { return b.age - a.age; } // 降序 if (sorting === 2) { return a.age - b.age; } }); } return fillList; } } } }); </script> </body></html>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Vue中computed和watch属性的区别
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Vue中computed和watch属性的区别
