面试官常问的问题

  • 在哪个生命周期钩子中，页面和数据尚未保持同步？
    答案： beforeUpdate()

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分析生命周期</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root" :x="n">
            <h2 v-text="n"></h2>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="add">点我n+1</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',

            //如果要分行写字符串，需要根据 ES6 的规定使用 ``
            //如果用此处的配置项，那么会把上面的 <div id= "root" :x="n">...</div> 全部替换为 <div> ... </div> 。即此处的template会把整个id="root"全部替换掉。
            // template:`
            //     <div>
            //         <h2>当前的n值是：{{n}}</h2>
            //         <button @click="add">点我n+1</button>
            //     </div>
            // `,

            data:{
                n:1
            },

            methods: {
                add(){
                    console.log('add')
                    this.n++
                }
            },

            watch:{
                n(){
                    console.log('n变了')
                }
            },

            beforeCreate() {
                console.log('beforeCreate')

                console.log(this)
                //debugger //设置一个断点 这也是一个标准的调试方式。调试思想:分析到哪，就把代码停在哪。
            },
            created() {
                console.log('created')

                console.log(this)
                //debugger 
            },

            //挂载之前
            beforeMount() {
                console.log('beforeMount')

                console.log(this)
                //debugger 

                //即使在这里操作了 DOM，你也看不见此时设置给 h2 中的内容
                //document.querySelector("h2").innerText = 'softool.cn'
            },

            //挂载完毕后,执行
            mounted() {
                console.log('mounted')

                console.log(this)
                //debugger

                //虽然此时操作DOM有效，但是应该尽量避免此时操作DOM
                //document.querySelector("h2").innerText = 'softool.cn'

                //下面我们看看 this.$el 中内容： this.$el 实际上记录着 真实DOM 的旧版本内容。
                console.log('mounted', this.$el instanceof HTMLElement) //true
            },

            //更新之前
            beforeUpdate() {
                console.log('beforeUpdate')

                console.log(this)
                //debugger 
            },
            updated() {
                console.log('updated')

                console.log(this)
                //debugger 
            }
        })
    </script>
</html>