Vue 基础语法（基础结构/生命周期）

Vue的基础结构

一共有三种：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 第一种 使用el 创建 -->
<div id="app">
    <div class="userBox">
        <span class="userName">{{user.name}}: </span>
        <span class="userAge">{{user.age}}</span>
    </div>
</div>
<script>
    new Vue({
        el: '#app', // 使用el 创建
        data: {
            user: {
                name: '张三',
                age: '20'
            }
        }
    })
</script>

<!-- 第二种 使用 render和$mount 创建-->
<div id="app2"></div>
<script>
    new Vue({
        data: {
            user: {
                name: '李四',
                age: '30'
            }
        },
        render(createElement) {
            // 1. createElement 方法的作用是创建虚拟DOM
            // 2. render 方法是把createElement 创建的虚拟DOM 返回
            return createElement('div', { class: 'userBox' }, [
                createElement('span', { class: 'userName' }, this.user.name + ': '),
                createElement('span', { class: 'userAge' }, this.user.age)
            ])
        }
    }).$mount('#app2')// 3. $mount 方法是把虚拟dom 转换为真实Dom 渲染到浏览器
</script>

<!-- 第三种 使用 template和$mount 创建-->
<div id="app3"></div>
<script>
    new Vue({
        template: `<div class="userBox">
        <span class="userName">{{user.name}}: </span>
        <span class="userAge">{{user.age}}</span>
    </div>`,
        data: {
            user: {
                name: '王五',
                age: '40'
            }
        }
    }).$mount('#app3')  
</script>

Vue 生命周期

生命周期解析图如下: 如上，共有八个生命周期：

• (初始化事件，生命周期相关成员) -> beforeCreate -> (把prop,data, methods等成员挂载到vue实例) -> created (可访问prop,data,method 等成员内容)
• (判断选项编译模板到render 中) -> beforeMount -> (把虚拟dom 转换为真实都没渲染到页面上）-> mounted (可直接访问挂载元素中的内容)
• (mounted 之后-> 当data 更新) -> beforeUpdate -> (重新渲染虚拟Dom, 并更新应用) -> updated(可访问新的渲染的元素)
• (destory() 函数被调用时) -> beforeDestory -> (解除的绑定，摧毁子组件及事件监听) -> destoryed

以上的生命周期是对于单个组件的顺序，那么对于多个组件的顺序会怎么样呢 如上：是父子组件的顺序，可以看出

• 在父元素 的beforeCreate, created, beforedMount 钩子执行之后，在父元素准备挂载，渲染页面时，才会触发子元素的生命周期函数beforeCreate, created, beforedMount ， 并且，会先触发子元素的 mounted , 再触发父元素的 mounted , （因为只有子元素都被挂载到页面上 了，父元素才算完整的被挂载到页面）
• 父元素 data 更新，会先触发父元素的 beforeUpdate, 并准备重新渲染，此时会触发子元素的beforeUpdated, updated, 然后才触发父元素的 updated (同理，是因为只有子元素都被更新之后，父元素才能算被完整更新)。并且只有在mounted 后（包括mounted）的钩子内，也就是挂载了元素之后，修改data, 才会触发 beforeUpdate, updated
• 父元素被销毁，会先触发父元素的 beforeDestory, 并准备摧毁子组件及事件监听，此时会触发子元素的 beforeDestory, destoryed, 然后才触发父元素的 destoryed (同理，是因为只有子元素都被销毁，解除监听后，父元素才能算被完全销毁)