[JavaScript知识库]深入解析vue脚手架export default{}(待更新)

目录

数据 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