美文网首页
Vue实例的生命周期钩子

Vue实例的生命周期钩子

作者: 普通的一个程序员 | 来源:发表于2020-12-15 12:50 被阅读0次

每个Vue实例创建时,都要经过一系列的初始化过程,设置监听、编译模板、挂载到dom冰在数据变化是更新dom等。在这个过程中,会运行一些叫做 钩子 的函数,这给了用户在不同阶段添加自己代码的可能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        
        <div id="app">
            <!-- 获取变量的值 -->
            {{value}}
          
        </div>

        <script type="text/javascript">
        var data = {value: 1123};
            var app = new Vue({
                el: "#app",  // 元素的id
                data: data,
                beforeCreate: function() {
                    console.log("beforeCrate")
                },
                created: function() {
                    console.log("created")
                },
                beforeMount: function() {
                    console.log("beforeMount")
                },
                mounted: function() {
                    console.log("mounted")
                    console.debug(arguments)
                },
                beforeUpdate: function() {
                    console.log("beforeUpdate")
                    
                },
                updated: function() {
                    console.log("updated")
                },
                beforeDestroy: function() {
                    console.log("beforeDestroy")
                },destroyed: function() {
                    console.log("destroyed")
                }
            })

            data.value="3333" //生效
           
            app.$watch('value', function(newVal, oldVal){
                console.log( newVal + ',' + oldVal)
            })

            data.value = 1231231   // 生效    

        </script>
    </body>
</html>

包含create、 mounted、updated和destroyed, 生命周期钩子里的this指向调用它的Vue实例

不可以在选线property或回调上使用 箭头 函数,比如:
create: () => console.log(this.a) 或者
app.$watch('a', newVal => this.myMethod())
因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: cannot read property of undefiend 或
uncaught TypeError: this.myMethod is not a function之类的错误

image.png

相关文章

  • 10、Vue_生命周期

    实例的生命周期 实例的生命周期图示(选项/生命周期钩子)实例生命周期 解释1.var v = new Vue{}:...

  • Vue生命周期

    Vue生命周期 实例生命周期钩子 每个Vue实例在被创建时都要经过一系列的初始化过程。 8种钩子函数 before...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • 一、vue基础知识点

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...

  • vue的生命周期详解

    vue生命周期的钩子1.根组件实例:8个钩子 (beforeCreate、created、beforeMount、...

  • vue知识总结

    vue attribute 是元素标签的属性,property 是元素对象的属性 vue实例 实例生命周期钩子 每...

  • VUE实例生命周期钩子

    1、vue实例生命周期钩子的由来 每个vue应用都是通过vue函数创建一个新的vue实例开始的: vue实例再被创...

  • Vue生命周期中钩子函数整理

    什么是生命周期? Vue实例从创建到销毁的过程。 Vue钩子 Vue(2.x)的一个生命周期中有11个钩子,接下来...

  • 初探Vue实例的生命周期

    Vue实例的生命周期简单地理解为8个钩子函数 Vue实例对每个钩子函数的调用时机如下 beforeCreate 在...

  • 深入浅出Vue生命周期钩子函数

    首先,先展示官方的Vue生命周期钩子函数的图示 在Vue2.0+版本,一个Vue实例共有以下八个生命周期钩子函数 ...

网友评论

      本文标题:Vue实例的生命周期钩子

      本文链接:https://www.haomeiwen.com/subject/yefwgktx.html