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

上一篇:前端开发一些常问的面试题


下一篇:vue-async-computed(异步计算属性使用)