深入解析vue脚手架methods,computed,data

目录

数据 Data Property

方法 methods

计算属性 computed

---

• 数据 Data Property

  • 组件的data选项是一个函数. Vue在创建新组件实例的过程中调用此函数. 它应该是一个对象,然后Vue会通过响应系统将其包裹起来,并以$data的形式存储在组件实例中. 为方便起见, 该对象的任意顶级property也直接通过组件实例暴露出来.

  • export default {
      // data 是一个函数
      // data为了存储数据,并将数据放在实例上,通过this可以访问
      data() {
        // return 暴露出来
        return {
          // 定义变量
          isAll: "变量",
          // 定义数组
          arr: [1, 2, 3],
          // 定义对象
          obj: { name: "张三" },
          // 定义json对象
          json: [{ name: "张三", age: 15 }],
        };
      },
    };

• 方法 methods

  • 我们有时候需要对特定的DOM元素添加事件(类似于点击事件).methods应该是一个包含所需方法的对象

  • export default {
      methods: {
        btnFn() {
          console.log("我是Dom元素上某个标签的点击事件");
        },
        // 使用具名函数,this这个时候指向Vue实例
        addFn() {
          this.count++;
        },
        // 应该箭头函数会改变this执行,导致里面的this没有指向Vue实例
        // 会报错
        subFn()=>{
          this.count--
        }
      },
    };

  • 当我们在methods方法中定义所需要的方法时候,应该尽量避免使用箭头函数 
  • 当我们在定义的事件方法内部的时候,类似于在内部遍历数组,这个时候使用this会更加方便,应该箭头函数的this方向会通过作用链访问上级的this指向,而这个this指向恰好是Vue实例

• 计算属性 computed

  • 对于任何包含响应式数据的复杂逻辑,我们通常用计算属性来解决
  • 通俗的说:当一个数据,依赖于另一些数据计算而来的结果
  • 基础语法

  • computed: {
        "计算属性名" () {
            return "值"
        }
    }

  • 完整语法

  • computed: {
        "属性名": {
            set(值){
                
            },
            get() {
                return "值"