关于vue.js:vue优化小技巧

1. 外部应用 hook 监听生命周期

   <template>
       <div>
           <h5> 生命周期 hook 用法：</h5>
           <p>
              <span v-for="item in arrList">{{item}},</span>  <br>
              <el-button @click="addFruit">Start（增加）</el-button>
           </p>
   </div>
   </template>
   <script>
       export default {data(){
               return{
                   arrList:['苹果','Apple','香蕉','葡萄','本人增加']
               }
           },
           methods:{addFruit(){this.arrList.push('你好')
               }
           },
           mounted(){this.$once('hook:beforeUpdate',()=>{ //1. 博客 仅仅减少可读性 $on&&$once $once 只会执行一次
                  console.log(this.arrList)
              })
           },
           // beforeUpdate(){//     console.log(this.arrList)
           // }
           // beforeUpdate () {//}
     
   }
   </script>

应用 hook 进步代码可读性，应用 $on 或者 $once 须要留神的是 $once 只会执行一次，$on 则会按失常执行

2. 函数式组件（今天认真看！！props 怎么传递数据！！）
无响应，没有一般 vue 文件的 data 响应式，能够缩小性能耗费，实用于详情以及只渲染表格等场景
无生命周期 计算属性 watch 监听
3.data 数据不响应的问题：
贴代码：

<span>
    用户名：{{userInfo.name}}
    <br>
    性别：{{userInfo.sex}}
    <br>
    年龄：{{userInfo.age}}
</span>
<el-button @click="addAge"> 增加年龄 </el-button>

userInfo:{
         name:'子君',
         sex:'男'
    }

addAge(){
            // this.userInfo.age = '66' // 1. 不失效哦
            this.userInfo = {
                ...this.userInfo,
                age:88
            } // 2. 好用 3. 间接提前定义好
        },

间接赋值不失效 因为初始化没有将属性增加到 data 对象中 所以当初是无响应状态，最好应用 $set 办法
4.Object.freeze

让数据脱离响应式零碎 渲染表格实用 节俭渲染性能～
https://juejin.im/post/6854573211422572557