外部应用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