vue中的各种属性 computed 和 methods watch区别

data

new vue({

　　data:{

　　　　'a':1

　　}

}) 　　是一个实例,data直接是一个对象

vue.component('my',{

　　template:'',

　　props:['title'],

　　data: function() {

　　　　return {

　　　　　　'a':1 }

　　}

})　　是组件注册,data 返回一个函数。组件是一个相对独立的个体，如果data直接是一个对象的话，一个组件被多次使用时，属性会相互影响。所以使用一个有返回值的函数来解决这个问题。

prop

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。但子组件传值不能直接传给父组件，要在子组件的method中利用$emit('父组件中on监听的方法'，值)自定义一个事件，并在父组件中引入子组件时，设置v-on：方法='方法'，并在method中设置方法：function(值){}函数接收值。

详细内容：https://www.cnblogs.com/sxgxiaoge/p/9453306.html

watch和computed

两者都是监听vue属性，但是computed属性中需要一个返回值，而且代码是同步执行，而watch则不需要，代码也可以是异步的。

computed: {
    fullName: {
        get: function(){
            return this.firstName +this.lastName
        },
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
},
watch: {
    search: function(){
        setTimeout(function(){
            console.log(11);
        },200);
    }
}

计算属性中这两个方法是固定的(get是默认的，可以自己加set)，在调用和设置对应的值的时候会调用对应的函数。

描述

vue 中computed 和methods 在使用效果来看可以说是一样的，但是深入看还是不一样的。区别就在于： computed 依赖缓存， methods 却不是。怎么理解呢？当Dom每次需要渲染computed的值，这个值已经处于缓存之中，不需要再重复的经历一遍计算过程，只有当computed依赖的数据变量发生变化，这个计算属性会自动更新，不需要渲染触发。methods 的值被获取的时候就会每次都会重新经历一遍计算过程。

所以由此可以看出，computed和methods 的应用场景和计算过程的复杂程度有关，如果计算过程复杂庞杂，而且计算属性会被经常调用（getter），那么最好使用缓存；如果，需要的值，计算简单，调用不频繁，实时性比较高（存在异步请求）,会比较适合methods

computed有缓存，若相关数据未发生变化，则不调用；
methods无缓存，需要事件才能调用它（如点击等）；
watch多用于数据交互频繁的内容。（例如定时axios从服务器获取数据）。

vue中的各种属性 computed 和 methods watch区别

描述

相关推荐