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

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据