|
阅读：6446回复：2
vue中computed和watch之间的差异
1、写法上的区别
在vue的生命周期的钩子函数里面，经常有mounted updated created computed:{} 这里注意英文写法是有"ed"结尾的watch : {} 这里没有"ed"结尾，此处要注意不要惯性的写成watched 2、用法上的差异 computed: 是把所有需要依赖其他值计算的值写成对象的key值。 例如 例1: var vm = new Vue({ data: { a: 1 }, computed: { //是最后需要计算的值，而这个值依赖this.a //那么这个值要写在对象的key值的位置 aDouble: function () { return this.a * 2 } } })这时候模板渲染的pw_aDouble这个值是2 ※ 通过计算的aDouble这个变量不需要在data里面声明，如果声明了就会报错 watch: 把监听的值写成对象的key值例如 例2: var vm = new Vue({ data: { a: 1 }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } }) vm.a = 2 // => new: 2, old: 1这时候如果this.a发生了改变，那么监听a变量发生变化的function就会被执行 ※ 需要监听的这个变量需要在data里面声明，如果不声明就会报错 3、是否利用缓存computed:拿上面的 例1代码来说吧~如果this.a的值不改变，那么当我们访问this.aDouble的时候，其实拿到的值并不是通过this.a*2计算过后的值，而是拿到的this.aDouble缓存的值，这个缓存的值第一次是哪里来的呢 ---> vue实例第一次被创建的时候算出来的计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。来自:https://segmentfault.com/q/1010000009263244?sort=createddodomonster的回答。 watch: 拿上面的 例2代码来说吧~只要a的值发生了变化，就会触发事件 。 |
|
|
沙发#
发布于：2020-03-11 22:07
vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理。 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" /> pw_fullName </div> <script> new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'vue', fullName: 'hello.ve' }, watch: { 'firstName': function(newval, oldval) { // console.log(newval,oldval); this.fullName = this.firstName + this.lastName; }, 'lastName': function(newval, oldval) { // console.log(newval,oldval); this.fullName = this.firstName + this.lastName; } } }); </script> </body> </html> watch监控路由对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register/value">注册</router-link> <!--组件的显示占位域--> <router-view></router-view> </div> <script> //1.0 准备组件 var App = Vue.extend({}); var login = Vue.extend({ template: '<div><h3>登录</h3></div>' }); var register = Vue.extend({ template: '<div><h3>注册pw_name</h3></div>', data: function() { return { name: '' } }, created: function() { this.name = this.$route.params.name; } }); //2.0 实例化路由规则对象 var router = new VueRouter({ routes: [{ path: '/login', component: login }, { path: '/register/:name', component: register }, { path: '/', //当路径为/时，重定向到/login redirect: '/login' } ] }); //3.0 开启路由对象 new Vue({ el: '#app', router: router, //开启路由对象 watch: { '$route': function(newroute, oldroute) { console.log(newroute, oldroute); //可以在这个函数中获取到当前的路由规则字符串是什么 //那么就可以针对一些特定的页面做一些特定的处理 } } }) </script> </body> </html> 计算属性computed的特点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" /> pw_fullName </div> <script> new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'vue' }, computed: { fullName: function() { return this.firstName + this.lastName; } } }); </script> </body> </html> |
|
|
板凳#
发布于：2020-03-11 22:07
|
|
