关于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