一些实用快捷键、生命周期钩子函数、计算属性

最新推荐文章于 2024-06-02 21:27:30 发布

初闻女人香

最新推荐文章于 2024-06-02 21:27:30 发布

阅读量848

点赞数 18

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/135842475

版权

快捷键

https://zhuanlan.zhihu.com/p/44044896
https://zhuanlan.zhihu.com/p/44044896添加链接描述

生命周期钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 一个容器,可以用于接收vue实力传来的数据，然后展示 -->
    <div id="root">
        <p id="h1">当前的值n为:{{n}}</p>
        <button @click="add">点我+1</button>
        <button @click="bey">点我销毁</button>
    </div>


</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<script type="text/javascript">
    Vue.config.productionTip = false,   //阻止vue启动时提示生产提示
        new Vue({
            el: '#root',
            data: { n: 1 },
            methods: {
                add() { this.n++ },
                bey() { this.$destroy() }
            },
            beforeCreate() {
                console.log('beforeCreate');

            },
            created() {
                console.log('created');

            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestry');
                console.log("vue实例准备销毁了");
            },
            destroyed() {
                console.log('destry');
                console.log("vue实例已经销毁了");
            }
        })
</script>

</html>

beforeCreate

: 在实例初始化之后、数据观测 (data observation) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段，实例的属性和方法还未被创建。

created

: 在实例创建完成后被调用。在这个阶段，实例的属性和方法已经创建完成，但尚未挂载到 DOM 上。

beforeMount:

在挂载开始之前被调用。在这个阶段，模板编译已完成，但尚未将模板渲染到真实的 DOM 中。

mounted

: 在挂载完成后被调用。在这个阶段，实例已经被挂载到 DOM 上，可以进行 DOM 操作或访问 DOM 元素。

beforeUpdate

: 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。在这个阶段，你可以对更新前的状态进行访问。

updated

: 在数据更新完成时被调用。在这个阶段，虚拟 DOM 已经重新渲染并应用了补丁，但可能尚未同步到真实的 DOM 中。

beforeDestroy

: 在实例销毁之前被调用。在这个阶段，实例仍然完全可用，你可以执行清理操作。

destroyed

: 在实例销毁后被调用。在这个阶段，实例的所有指令和事件监听器都已被移除，所有子实例也会被销毁。
在这里插入图片描述

在beforCreate之前

vue做了两件事：methos声明，生命周期钩子函数声明
在创建阶段
data数据注入，data数据劫持
1.遍历递归data选项，给每个声明式变量添加setter/getter
2.把劫持过变量都放在组件实例上

在beforeMount之前

会寻找是否有template/el的模板，组件的试图模板（带有指令的HTML字符串）
把找到的template视图（带有指令的HTML字符串），编译成render（）渲染函数

在挂载阶段

vue做了下面的事（vue引擎第一次工作）
1.根据render()渲染函数，生成“抽象语法树AST”（此时还是带有指令的），再把AST第一次创建成“虚拟DOM（VNode1）”（Vnode是真实DOM的一种数据描述，它本质上是json格式的数据）
2.根据Vnode1创建真实DOM（第一次接触，收集依赖，watcher发生在此处）把那些声明式变量全部替换成真实数据，DOM渲染完成

在beforeUpdate之前

当被劫持的data数据发生变化时，这将经入更新阶段
在更新阶段
vue做了以下事情：
1.当vue上下文的data发生变化时，使用render（）渲染函数在生成一新的Vnode2
2.使用大名鼎鼎的Diff运算，patch（old Vnode，new Vnode），找出两个Vnode最小差异，合并Vnode，生成新的Vnode，删除旧的Vnode
3.notify通过Watcher根据"依赖收集"在此更新真实DOM

在调用destroy（）或路由切换时

组件经入销毁阶段，在销毁阶段中，vue做了如下事情
1.拆卸掉了Watcher，所以DOM不可能再发生更新
2.拆卸掉当前组件的所有子组件，所以这些子组件也会经入销毁阶段
3.卸载掉当前组件中的事件处理器
（生命周期的钩子函数，代表的是生命周期的某一时刻）
在这里插入图片描述

在这里插入图片描述

计算属性

基本计算属性computed

计算属性可以基于 Vue 实例的数据进行计算，并返回计算结果。它们使用 computed 属性来定义。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

带有 Getter 和 Setter 的计算属性

计算属性还可以具有 Getter 和 Setter，用于对计算属性进行读取和设置操作

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

侦听计算属性变化 watch

可以使用 watch 属性来侦听计算属性的变化，并在计算属性变化时执行相应的操作

watch: {
  fullName(newVal, oldVal) {
    console.log('计算属性 fullName 发生变化：', newVal, oldVal);
  }
}

computed V/S methods

<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>

初闻女人香

关注

18
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
一些实用快捷键、生命周期钩子函数、计算属性

1.根据render()渲染函数，生成“抽象语法树AST”（此时还是带有指令的），再把AST第一次创建成“虚拟DOM（VNode1）”（Vnode是真实DOM的一种数据描述，它本质上是json格式的数据）在这个阶段，实例的属性和方法还未被创建。2.使用大名鼎鼎的Diff运算，patch（old Vnode，new Vnode），找出两个Vnode最小差异，合并Vnode，生成新的Vnode，删除旧的Vnode。: 在实例销毁后被调用。在这个阶段，实例的所有指令和事件监听器都已被移除，所有子实例也会被销毁。
复制链接

扫一扫