计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
计算属性(computed) vs 方法(methods)
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
- 方法: 当使用方法时,每一次页面重新渲染对应的方法都会重新执行一次
- 计算属性:值会存到缓存中,只要它依赖的data的值不发生变化,那么它就不运行,每次访问计算属性的时候都会从缓存中调取数据
深入计算属性
计算属性除了写成方法之外,还可以写成一个对象、
对象:
有两个属性
- getter
- setter
示例:
let vm = new Vue({
el:"#app",
data:{
msg:'hello',
name:'古天乐',
now:''
},
computed:{
add:{
get(){
console.log("方法执行啦");
return this.msg.split('').reverse().join('');
} ,
set(newval){
console.log("set方法执行了");
this.now = newval;
console.log(this.now);
}
}
}
})
getter 读取
默认的, 默认情况下出现的函数就是getter方法 this自动邦定vue实例
setter 设置
这两个方法跟set和get方法一样
组件基础
1.组件是什么?
组件是可复用的vue实例,且带有一个名字。
当作自定义元素来使用
总结: 组件就是我们自定义的一个元素
但是要注意的是:必须用在vue的模版中使用
2.全局组件 局部组件
全局组件
Vue.component