Vue 进阶语法和生命周期

最新推荐文章于 2022-06-21 15:40:25 发布

宏辉

最新推荐文章于 2022-06-21 15:40:25 发布

阅读量207

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42914989/article/details/113922688

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted等钩子函数及其应用场景。同时，介绍了如何使用computed计算属性简化复杂表达式，并展示了watch监控属性的用法，用于响应数据变化。通过实例演示，帮助读者掌握Vue实例创建、数据更新和销毁过程中的关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Vue 进阶语法和生命周期

Vue 进阶语法和生命周期

a. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 根Root实例 开始的:

// 创建Vue实例
var vue = new Vue({
    // 选项对象
});

在这里插入图片描述
b. 当创建一个 Vue 实例时，你可以传入一个选项对象, 选项对象包括(例举):

DOM (视图):
- el: 渲染的html元素
- template: 渲染的模板(组件开发时用)
- render: 渲染函数(组件开发时用)
数据/方法
- data: 数据
- props: 组件属性((组件开发时用))
- methods: 方法
- computed: 计算属性
- watch: 监控属性
生命周期钩子(不同阶段自动回调的函数)
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed

c. Vue实例常用的方法:

vm.$mount() 挂载方法 (常用于组件开发)

如果 Vue 实例在实例化时没有指定 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。

可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
vm.$emit() 定义触发当前实例上的事件 (常用于组件开发)

触发当前实例上的事件。附加参数都会传给监听器回调。

参考官方api: https://cn.vuejs.org/v2/api/

16、Vue：生命周期【了解】

目标: 了解vuejs的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程: 创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期钩子函数:

beforeCreate：实例初始化之后调用（要啥啥没有，data和methods都拿不到）
created：实例创建完成后调用（data和methods都拿到了）
beforeMount：挂载开始之前调用**（拿到了html元素作为模板，但是还没有做数据挂载）**
mounted：挂载完毕之后调用
beforeUpdate：数据更新之前调用
updated：数据更新之后调用
beforeDestory：实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed：实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期图示:
在这里插入图片描述

vm.$el: Vue 实例使用的根 DOM 元素。

Vue在实例化的过程中，会调用这些生命周期的方法，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子:

demo_13.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs生命周期钩子</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el : '#app',
            data : {
                message : 'VueJS 您好!'
            },
            beforeCreate : function() {
                showData('1.实例初始化之后', this);
            },
            created : function() { // 比较重要(发异步请求加载初始化数据)
                showData('2.实例创建完成后', this);
            },
            beforeMount : function() {
                showData('3.挂载到dom前', this);
            },
            mounted : function() {
                showData('4.挂载到dom后', this);
            },
            beforeUpdate : function() {
                showData('5.数据变化更新前', this);
            },
            updated : function() {
                showData('6.数据变化更新后', this);
            },
            beforeDestroy : function() {
                vm.test = "3333";
                showData('7.vue实例销毁前', this);
            },
            destroyed : function() {
                showData('8.vue实例销毁后', this);
            }
        });

        function showData(process, obj) {
            console.log(process);
            console.log('data 数据：' + obj.message)
            console.log('挂载的对象：')
            console.log(obj.$el)
            console.log('真实dom结构：' + document.getElementById('app').innerHTML);
            console.log('-------------------------------')
        }
        vm.message = "good...";
        vm.$destroy();
    </script>
</body>
</html>

小结

页面初始化数据，可以在哪些钩子函数中提前加载?
- created、beforeMount、mounted 三个钩子函数(发送异步请求，获取后台数据)

17、Vue：computed计算属性

目标: 掌握compued计算属性的使用

在插值表达式中使用js做运算非常方便。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，这个时候就可以用计算属性。

使用语法:

computed: {
    key1: function(){
        return "计算后的数据";
    },
    key2: function(){
        return "计算后的数据";
    }
}

demo_14.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs计算属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <h2>{{new Date(milliseconds).getFullYear() + "年"
                + new Date(milliseconds).getMonth()
                + "月" + new Date(milliseconds).getDate()}}</h2>
        <!-- 计算属性 (注意：它不是一个函数) -->
        <h2>{{time}}</h2>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                milliseconds : 1573878276849,
            },
            computed : { // 计算属性
                time (){ // time属性
                    const date = new Date(this.milliseconds);
                    return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate();
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

注意:

计算属性本质是函数，但是一定要返回数据。页面渲染时，只能把这个函数当成一个属性来使用。
计算属性需要我们自己主动调用，生命周期钩子函数不会主动调用计算属性。

18、Vue：watch监控属性

目标: 掌握watch监控属性的使用

watch可以帮我们监控数据对象中的属性值发生改变。

使有语法:

watch : {
    key1 : function(newVal, oldVal){
        
    },
    "obj.key1" : function(newVal, oldVal){
        
    },
    obj : {
         // 开启深度监控(对象)
		deep : true,
         // 监控函数，必须用这个函数名
         handler : function(obj){
                
         }
    }
}

demo_15.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs监控属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/><br/>
        <h2>{{message}}</h2>

        <input type="text" v-model="user.name"/><br/>
        <input type="text" v-model="user.age"/><br/>
        <h2>
            姓名: {{user.name}} ==> 年龄: {{user.age}}
        </h2>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                message : '',
                user : {name : '', age : ''}
            },
            watch : { // 监控属性
                message : function(newVal, oldVal){
                    console.log("新值:" + newVal + ",旧值:" + oldVal);
                },
                "user.name" : function(newVal, oldVal){
                    console.log("user.name:" + newVal + ",user.name:" + oldVal);
                },
                user : {
                    // 开启深度监控，可以监控到对象属性值的变化
                    deep : true,
                    // 监控处理函数
                    handler : function (obj) {
                        console.log("name:" + obj.name + ",age:" + obj.age);
                    }
                }
            }
        });
    </script>
</body>
</html>