vue的生命周期及监听函数简单介绍

小也同学

已于 2022-03-29 17:22:26 修改

阅读量671

点赞数

分类专栏： vue的使用文章标签：前端 javascript 开发语言

于 2020-06-11 09:51:04 首次发布

本文链接：https://blog.csdn.net/qq_37734787/article/details/106680904

版权

vue的使用专栏收录该内容

43 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app" ref="app">
            价格：
            <div>{{ price }}</div>
            个数：
            <div>{{ nums }}</div>
            金额：
            <div>{{ totalNums }}</div>
            <button @click="addClick">点击个数加一</button>
        </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#app',
            props: {
                showPage: {
                    type: Boolean,
                    default: false,
                },
            },
            data: {
                nums: 1,
                price: 2,
            },
            beforeCreate() {
                console.log('==beforeCreate创建前：==');
                // 可以在这个钩子函数获取本地保存的数据如localStorage，sessionStorage
                console.log(this.$el, '文档加载是否完成'); // undefined
                console.log(this.$data, 'data数据加载是否完成'); // undefined
                console.log('---文档和data数据都没完成---');
                console.log('------');
            },
            watch: {
                showPage: {
                    handler(newVal) {
                        console.log('==watch创建完成：== ');
                        console.log(this.$el, '文档加载是否完成'); // undefined
                        console.log(this.$data, 'data数据加载是否完成');
                        console.log('data数据创建好了,文档还没');
                        console.log('------');
                        if (!newVal) return;
                        this.getData();
                    },
                    immediate: true,
                },
            },
            computed: {
                totalNums: function () {
                    console.log('==computed创建完成：== ');
                    console.log(this.$el, '文档加载是否完成'); // undefined
                    console.log(this.$data, 'data数据加载是否完成');
                    console.log('文档和data数据创建好了');
                    return this.nums * this.price;
                },
            },
            created() {
                console.log('==created创建完成：==');
                console.log(this.$el, '文档加载是否完成'); // undefined
                console.log(this.$data, 'data数据加载是否完成');
                console.log('data数据创建好了,文档还没');
                console.log('------');
            },
            beforeMount() {
                console.log('==beforeMount挂载前：==');
                console.log(this.$el, '文档加载是否完成');
                console.log(this.$data, 'data数据加载是否完成');
                console.log(this.$refs.app, '小结：DOM创建完成,但是数据还没挂载DOM视图上'); //undefined；在这个钩子函数获取不到DOM元素
                console.log('------');
            },
            mounted() {
                console.log('==mounted挂载完成：==');
                //可以在这个钩子函数里操作DOM元素了
                console.log(this.$refs.app, '小结：DOM文档视图和数据已经可以联系了');
                console.log('------');
            },
            beforeUpdate() {
                //第一次打开页面时是不会触发该钩子函数的，组件更新了才会
                console.log('==beforeUpdate即将更新渲染:==');
                let name = this.$refs.app.innerHTML;
                console.log('name:' + name);
                console.log('------');
            },
            updated() {
                //第一次打开页面时是不会触发该钩子函数的，组件更新了才会
                console.log('==updated更新渲染成功:==');
                let name = this.$refs.app.innerHTML;
                console.log('name:' + name);
                console.log('------');
            },
            /*beforeDestory(){
                console.log("销毁前：");
            },
            destoryed(){
                console.log("销毁完成：");
            }*/
            methods: {
                addClick() {
                    this.nums += 1;
                },
            },
        });
    </script>
</html>

总结

vue的 data() { return { arrData:[] }}
在当前组件里面绑定的值arrData监听很深，尽管在视图遍历很多层下的数据，只要改变了，就会引起遍历的那个arrData数据改变，也会使data里面的arrData数据发生改变。从而使视图更新，

注意点

computed要能触发的话，

第一个

视图上必须使用到改监听的函数名称

第二个

建立的函数里面必须要精确的监听（使用）到数组或对象发生改变的那个值（第一点：改变的值一定要跟之前的值不一样，不然触发不了，第二点：该属性值必须是有get和set方法，不然触发不了，可以通过this.$set来使其变成有set和get方法），不然是无法触发函数进行逻辑操作返回处理的值。

一开始加载页面Vue生命周期及监听函数执行顺序

beforeCreate>watch>created>beforeMount>computed>mounted
watch执行时期数据data（this.$data）已经加载好了
computed执行时期数据datathis.$data和页面this.$el都加载好了

computed在页面一加载就会触发

触发时间先后：如果computed里面使用了辅助函数mapState进行逻辑处理，那么时间早于onLoad和mounted，如果computed里面没有使用辅助函数mapState，那么时间慢于onLoad触发时间，早于mounted触发时间

小也同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期及监听函数简单介绍

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body>
复制链接

扫一扫

专栏目录