Vue组件的实例里面常见的都有什么？

原创已于 2022-06-01 10:57:17 修改 · 809 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤器

于 2020-04-12 17:22:54 首次发布

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨Vue.js的关键特性，包括数据绑定、计算属性、生命周期钩子、自定义指令等，通过具体代码示例解释如何使用这些特性来构建响应式用户界面。

每个export default里都有很多方法，今天复习了常用的一些。

数据相关的有：

包括props、data状态，自定义方法，计算属性，监听。

<template>
  <div>
    <div>路由传递参数{{id}}</div>
    <div @click="show">控制台打印</div>
    <div>计算属性{{add}}</div>
    <Nav />
  </div>
</template>

<script>
export default {
  //外部状态：接收外部参数  props: ['id']
  props: { id: String },

  //内部状态：组件内部数据
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 1
      }
    };
  },

  //自定义方法
  methods: {
    show() {
      console.log("打印");
      this.c = {
        d: 3
      };
    }
  },

  //计算属性 与计算相关，返回最后计算出来的值，相关依赖发生改变时才会重新取值，提高性能
  computed: {
    add() {
      return this.a + this.b;
    }
  },

  //监听实例上表达式或函数计算结果的变化
  watch: {
    //检测a是否发生了变化 发生变化执行aChange函数
    id: "idChange",
    "c.d": {
      handler(newName, oldName) {
        console.log(newName, oldName);
        //newName 当前值, oldName 原来的值
      },
      //让d的值未改变时候watch就执行
      immediate: true,
      //深度监听
      deep: true
    }
  }
}
</script>

生命周期钩子相关的有：

这8个是比较常用的，可以概括为实例前后，挂载前后，状态更新前后，销毁前后。

export default {
  //生命周期钩子
  beforeCreate() {
    //初始化实例前
  },
  created() {
    //实例创建完成
  },
  beforeMount() {
    //虚拟dom挂载到正式dom前
  },
  mounted() {
    //挂载到正式dom完成
  },
  beforeUpdate() {
    //虚拟dom重新渲染前，更新props、data时
  },
  updated() {
    //props、data更改后
  },
  beforeDestroy() {
    //实例销毁前
  },
  destroyed() {
    //实例销毁完成
  }
}

资源类相关的有：

包括过滤器、组件注册、自定义指令

<template>
  <div>
    <input v-focus:[id]="{a:1,b:2}" />
    <div>{{value|addPriceIcon}}</div>
    <Nav />
  </div>
</template>

<script>
import Nav from "./Nav";
export default {
  data() {
    return {
      id: "text",
      value: "100"
    };
  },
  //组件注册
  components: { Nav },

  //局部过滤器
  filters: {
    //处理函数
    addPriceIcon(value) {
      return "¥" + value;
    }
  },

  //组件内自定义指令
  directives: {
    focus: {
      bind(el, binding, vnode) {
        //el 指令所绑定的元素
        //binding  一个包含指令信息的对象   binding.arg: [id]   binding.value:等号后的值
        //vnode 虚拟节点
        console.log(el, binding, vnode);
        //指令第一次绑定到元素时调用，只调用一次，一般用来进行一次性的初始化设置
      },
      inserted(el) {
        //被绑定元素插入父节点时调用
        el.focus();
      },
      update() {
        //所在组件的虚拟节点更新时调用
      },
      componentUpdated() {
        //所在组件的虚拟节点全部更新后调用
      },
      unbind() {
        //只调用一次，指令与元素解绑时调用
      }
    }
  }
};
</script>

扩展：全局注册自定义指令和过滤器的方法

Vue.filter('capitalize', function (value) { })

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})