正文
vue中的各种属性
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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)，在调用和设置对应的值的时候会调用对应的函数。
computed 和 methods watch区别
描述
vue 中computed 和methods 在使用效果来看可以说是一样的，但是深入看还是不一样的。区别就在于： computed 依赖缓存， methods 却不是。怎么理解呢？当Dom每次需要渲染computed的值，这个值已经处于缓存之中，不需要再重复的经历一遍计算过程，只有当computed依赖的数据变量发生变化，这个计算属性会自动更新，不需要渲染触发。methods 的值被获取的时候就会每次都会重新经历一遍计算过程。
所以由此可以看出，computed和methods 的应用场景 和 计算过程的复杂程度有关， 如果计算过程复杂庞杂，而且计算属性会被经常调用（getter），那么最好使用缓存；如果，需要的值，计算简单，调用不频繁，实时性比较高（存在异步请求）,会比较适合methods
computed有缓存，若相关数据未发生变化，则不调用；
methods无缓存，需要事件才能调用它（如点击等）；
watch多用于数据交互频繁的内容。（例如定时axios从服务器获取数据）。
