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从服务器获取数据)。
原文地址:https://www.cnblogs.com/icctuan/p/11752915.html