Vue.js（五）计算属性及初识组件

计算属性

计算属性关键词: 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