2.vue的不更新特性-重用机制和key属性-data及其他字段-vue生命周期
vue基础语法
1. 数据绑定的不更新特性
在数组中使用索引的方式修改了数组中的某一条数据时, 数组的长度没有发生变化, 视图不会自动更新
如果我们想让视图继续更新该怎么办?
<div id='app'><h1>{{ count }}</h1><button @click="change1">+</button><h1>{{ arr[0] }}</h1><button @click="change2">+</button>
</div>data: {count: 1,arr: [66]
},methods: {change1() {this.count++},// 这个时候 我们发现光点击 change2 按钮的时候 视图是不会改变的!!!!!change2() {this.arr[0]++// 如何解决这个问题?// 方案一: 使用其他数据更新, 带动数组更新// -----> 可以看到, 如果在我单击change2视图不更新后, 在点击change1, 1中的视图更新会带动2中的视图更新!// 方案二: 强制视图更新:this.$forceUpdate()// 方案三: 使用set函数// 参一: 要更新的数组 参二: 要更新数组中哪一个的索引 参三: 新的值this.$set(this.arr, 0, this.arr[0]++)// 方案四: 更新数组的长度, 数组的长度如果发生了变化 vue视图就会更新// push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。this.arr.unshift()}
}补充:
在初始化的时候, data中并没有某个字段, 后期我们又添加了这个字段, 那么这个字段的修改就不会更新视图
2. vue重用机制和属性key
使用切换登录方式案例
<button @click="login=!login">点击切换登录方式</button> // 使用 v-if // 原则上 v-if 是满足条件时创建 不满足销毁<section v-if="login" id="section1">账号: <input type="text" placeholder="请输入账号"><br>密码: <input type="password" placeholder="请输入密码"></section><section v-else id="section2">手机号: <input type="text" placeholder="请输入手机号"><br>验证码: <input type="text" placeholder="请输入验证码"></section>data: {login: true,},// 场景:
// 在我们给输入框输入内容之后, 点击切换登录方式, 发现虽然登录方式改变了, 但是input中的内容还在! 说明输入框没有被销毁// 为什么会这样?// ----> vue的重用机制(懒惰机制)// 原理:// 在 v-if 切换标签时, 如果将要销毁的标签和要创建的标签时相同的标签时, vue不会执行创建和销毁, 而是保留下来, 继续使用.// 如何解决?---------------->
// 解决方案一: 使用不同的标签 保证 v-if 和 v-else 使用的不是同一个类型的标签
<section v-if="login" id="section1"></section>
<div v-else id="section2"></div>// 解决方案二: 给切换前后的属性设置 key 值
// key的值不可以相同
<section v-if="login" id="section1" key="key1"></section>
<section v-else id="section2" key="key2"></section>如何避免重用机制?
由于重用机制针对相同的标签, 所以可以设置不同的标签切换以避免重用机制
重用机制只会对 key 值相同的标签重用, key 不相同则不会重用, 默认 key 是相同标签的 索引
3. key属性深入理解
在 vue 中, key 是DOM对象的标识
进行列表 v-for 展示时，默认
key是index；如果数据只做展示使用，使用index作为key是没有任何问题的；
如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM
key 被使用在虚拟 DOM 中, 不会出现在真实的 DOM 中
如果把 index 索引 作为 key 的值
列表内有输入内容，后续操作破坏了原始顺序，就会产生错误DOM
为什么会产生错误的DOM对象?
-------> 因为上一节的 【重用机制】 <------------
- 看这个案例你就懂了!
<button @click="add">添加一个老刘</button><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li></ul>data:{persons:[{'id':'1', 'name':'张三','age':'18'},{'id':'2', 'name':'李四','age':'19'},{'id':'3', 'name':'王五','age':'20'}]},methods:{add(){const p = {'id':'4', 'name':'老刘','age':'40'}// 在前面添加this.persons.push(p)}}// 场景一: :key属性的值为 ---> 索引
// 根据重用机制 如果标签都相同的时候 key属性的值默认为 标签的索引
// 如果我们在标签内输入内容之后, 在点击添加, 发现出现dom渲染出错
// 在key生成虚拟dom的时候 会和旧的key进行比较 新生成的'老刘'DOM会对比旧的'张三'的DOM, 因为在渲染之前'张三'的key属性为0,在虚拟DOM中, '老刘'的key属性值为0; 在渲染新数据的时候, 会把'老刘'渲染到页面上, 在渲染input的时候, 发现已经存在key===0的属性,就不会在重新渲染! 直接会拿过来使用!!! ----> 所以出现了错误的真是DOM// 场景二: :key属性设置为 ---> 数据中的唯一标识 id
因为 id 的值是唯一的, 所以在生成虚拟DOM的时候. key找不到相同的值 因为id都是唯一的啊
找不到怎么办呢? ----> 很简单, 重新渲染新的啊 ---> 这就是我们想要的效果- 总结
推荐使用数据的唯一标识作为key，比如id，身份证号，手机号等等，通常这些数据由后端提供。
后续操作不破坏原来数据顺序的话，使用index作为key也没有任何问题。
4. 计算属性
4.1基本使用
// 计算属性定义在 computed 对象中// 使用计算属性的时候 不需要加()<h2>{{ fullName }}</h2>data: {firstName: 'Lebron',lastName: 'James'},// computed 计算属性computed: {fullName(){return this.firstName + ' ' + this.lastName}},
4.2 完整的计算属性
// 续基本使用中的 data 和 h2
// 基本使用中的计算属性, 实际上是一种简写
computed: {fullName: {set(newValue) {this.firstName = names[0];this.lastName = names[1];},get() {return this.firstName + ' ' + this.lastName}}
}// 为什么计算属性在使用的时候不需要加括号?
因为计算属性中的方法中的内容都是写在get中的, 在使用计算属性的时候, 会调用里面的get// 什么时候使用 set 什么时候使用 get?
在我们更改值的时候, 才会走set. 使用set的时候必须要传参数!!!
4.3 计算属性和methods的对比
只要计算属性中的值没有变化 就会有一层缓存 多次使用的时候只会执行一次 大大的提高了性能
计算属性写在computed中, 自定义函数写在methods中
自定义函数需要使用函数调用结构 函数名 + () 调用; 计算属性调用时, 当做data属性调用 直接写属性名即可.
自定义函数每次调用的时候, 都会执行一次 浪费性能
计算属性 在计算一次之后 会把结构缓存起来, 下次调用直接从缓存中读取结果 不在重新执行计算 比较节省性能 提高效率 尤其使用计算量比较大的场景
注意: 计算属性不从新计算的前提是数据源不变, 当数据源发生变化, 计算属性会重新计算
5.监听器
和data平级的字段 ---> watch
作用: ---> 用于监视对应data中的字段(变量)数据的变化
注意: ---> 监视器中依然是函数函数结构 但是函数名 ---> 是要监视的字段名
举例:
data: {age: 1,obj: {age3: 2}
},
computed: {age2() {return this.age*2}
}
watch: {// 参数: 数据变化前后的新值 和 旧值age(newValue, oldValue) {console.log(1,newValue + "======" + oldvalue);},// 也可以监视计算属性内的函数age2(newValue, oldValue) {console.log(2,newValue + "======" + oldvalue);},// 监听对象, 对象的属性增删改都监听不到obj(newValue,oldvalue) {console.log(3,newValue + "======" + oldvalue);},// 深度监听: obj:{// handler() 是固定的函数名 不能修改 是一个监听函数 只能获取新值handler(newValue){console.log(4,newValue);},// 开启深度监听deep: true},// 监听数组 数组通过索引更新数据 监听不到arr(newValue,oldvalue) {console.log(4,newValue + "======" + oldvalue);},arr:{// handler() 是固定的函数名 不能修改 是一个监听函数 只能获取新值handler(newValue){console.log(6,newValue);},// 开启深度监听deep: true},
}// 只有在被监听的数据发生变化时, 监听器才会被触发
总结:
普通监听能监听到: data对象中的基本数据类型和计算属性的更新
深度监听能监听到: 普通监听 + 对象的更新 + 数组的增删
深度监听不能监听到的: 数组通过索引修改数据(这是特殊情况1), 对象在data初始化之后添加的字段(特殊情况2)
6. VUE的生命周期函数
生命周期: 一个vue对象从创建到销毁的整个过程, 在这个过程中, vue会自动调用一些函数, 这些函数叫做生命周期函数.
vue的生命周期分为四个过程 每个过程对应两个函数
1: 创建过程 beforeCreate created
2: 渲染过程 beforeMount mounted
3: 更新过程 beforeUpdate updated
4: 销毁过程 beforeDestory destoryed
6.1 创建过程
- 生命周期函数都与 data 平级
beforCreate(){// 此时vue对象还未创建完成, this虽然有值, 但是data中的数据全部都是undefined, 无法调用. 所以不能在此操作视图console.log(this)
},created() {// 此时vue对象已经创建完成 可以操作vue中的数据 但是视图还未渲染 不能操作视图我们通常都是在这里面进行 ajax 请求, 因为在这里可以最早的拿到数据进行操作在拿到请求数据之后, 可以直接赋值给data中的某个值// 补充data中没有 sex 这个数据, 但是我们在这里打点调用了. 虽然也可以渲染到视图上, 但是由于没有在data中定义, 所以不具备更新视图的功能, 就算数据更新了, 视图不会更新, 所以这样一般是当做全局变量使用this.sex = '男'
}
6.2 渲染过程
beforeMount() {// 在这里 vue中的的数据还没有渲染到视图上, 不建议在这里面操作视图
},
mounted() {// 这时候 视图已经渲染完成 可以在这里操作视图 BOM和DOM相关操作写在这里面// 举个例子把// 查找标签 获取一个按钮 this.btn 当全局变量使用 this.btn = document.getElementsByTagName("button")[0];// 绑定事件 最好把绑定事件的函数写在外面(写在methods中) 这样就比较好操作销毁this.btn.addEventListener("mouseenter",this.btnHandle);
},methods: { // 自定义函数// 绑定事件的函数放在这里面btnHandle(){console.log(this); // vuethis.btn.style.backgroundColor = 'red'}},
6.3 更新过程
beforeUpdate() {// vue的数据将要更新 但是还未更新// 我们可以在这里添加判断 来阻止更新// 比如我们不想让data中的数据大于18if(this.age > 18) {this.age = 18}
},
updated() {// 在这里数据已经更新完毕 可以获取更新后的值
}
6.4 销毁过程
beforeDestroy() {// 此时vue对象将要销毁 我们在这里面把无用的计时器 和 绑定的事件等销毁了 释放性能
},
destroyed() {// vue对象已经销毁 我们在这里把vue变量置空 清理内存vm = null
}
2.vue的不更新特性-重用机制和key属性-data及其他字段-vue生命周期相关推荐
- ASP.Net请求处理机制初步探索之旅 - Part 4 WebForm页面生命周期
开篇:上一篇我们了解了所谓的请求处理管道,在众多的事件中微软开放了19个重要的事件给我们,我们可以注入一些自定义的业务逻辑实现应用的个性化设计.本篇,我们来看看WebForm模式下的页面生命周期. ( ...
- vue created 调用方法_深入解析 Vue 的热更新原理，偷学尤大的秘籍？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
- 深入解析 Vue 的热更新原理，尤大是如何巧用源码中的细节？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
- 前端八股文(Vue部分) -不断更新
1. 什么是单向绑定?什么是双向绑定? 单向绑定:修改data中初始化的数据,则Vue管理的页面的模板中的数据随之发生改动,这就叫单向绑定,也被称之为数据实现了可响应式,大虎子表达式和指令语法中的指令 ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- 详解vue生命周期及每个阶段适合进行的操作
VUE生命周期的四个阶段 create 创建 -------- 创建vue实例并初始化 mount 挂载 -------- 把vue实例和视图进行关联 update 更新 ------- 监听数据与视 ...
- Vue深入学习4—指令和生命周期
1.Vue是怎么识别 v- 指令的? 首先将HTML结构解析成属性列表,存入到数组中,接着遍历数组中的每一个节点,获取到不同指令对应的方法. // 将HTML看作真正的属性列表 var ndoeAtt ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- Vue 学习笔记（2）Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发 局部组件的开发 组件中 props 的使用 在组件上声明静态数据传递给组件内部 在组件上声明动态数据传递给组件内部 pr ...
- Vue生命周期(个人理解)
描述:今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期 剩下的自己扩展,哎,自己来了兴趣,为啥,自己第一次面试的时候记得很清楚.面试官:"简单说一下你对vue生命 ...
最新文章
- 图像数据集如何制作？增强？？
- Nature综述：多年冻土的微生物组
- 记录一次异常 出现不支持的 SQL92 标记: 70
- 一个多功能蓝色漂亮的搜索条
- 提交第一个spark作业到集群运行
- php restful 认证,Yii2.0 RESTful API 认证教程
- 二维卷积神经网络的结构理解
- JAVA组件使用---UUID使用方法
- Host 'admin-PC' is not allowed to connect to this MySQL server
- 数字图像处理：对数变换
- “快手极速版”的模拟器多开方法
- Android | WIFI Direct -1 Basic knowledge
- Laravel学习记录--访问器与修改器
- 判断ios系统、qq浏览器，iosqq内置浏览器，微信内置浏览器
- R语言GARCH-DCC模型和DCC（MVT）建模估计
- Yarn01：诞生背景、架构和工作机制介绍
- 系统分析与设计方法---用户界面设计的原则
- 没什么可以阻挡我要坚持到底
- MQ 安装步骤以及回退方案
- python列表常用方法实践_Python 之列表的常用方法