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