Vue的渲染原理

列表渲染

`列表渲染`

v-for指令写在循环项上：v-for=“(一个参数或者两个参数) in/of 要遍历的数组、对象、字符串、指定次数”

遍历数组时参数分别是数组中元素(可以是一个对象)和元素所在下标(从0开始)
遍历对象时参数分别是属性值和属性名
遍历字符串时参数分别是单个字符和字符所在下标(从0开始)
遍历次数时参数分别是当前遍历的次数和遍历次数所在的下标(从0开始)

<body><div id="app"><h1>{{msg}}</h1><h2>遍历数组</h2><!-- 静态列表 --><ul><li>张三</li><li>李四</li><li>王五</li></ul><!--动态列表--><ul><li v-for="name of names">{{name}}</li></ul><ul><li v-for="(name,index) of names"> {{name}}-{{index}}</li></ul><h2>遍历对象的属性</h2><ul><li v-for="(value, propertyName) of user">{{propertyName}},{{value}}</li></ul><h2>遍历字符串</h2><ul><li v-for="(c,index) of str">{{index}},{{c}}</li></ul><h2>遍历指定的次数</h2><ul><li v-for="(num,index) of counter">{{index}}, {{num}}</li></ul><!--遍历数组中的对象--><table><tr><th>序号</th><th>会员名</th><th>年龄</th><th>选择</th></tr><tr v-for="(vip,index) in vips"><td>{{index+1}}</td><td>{{vip.name}}</td><td>{{vip.age}}</td><td><input type="checkbox"></td></tr></table></div><script>const vm = new Vue({el : '#app',data : {msg : '列表渲染',names : ['jack','lucy','james'],vips : [{id:'111',name:'jack',age:20},{id:'222',name:'lucy',age:30},{id:'333',name:'james',age:40}],user : {id : '111',name : '张三',gender : '男'},str : '动力节点',counter : 10}})</script>

v-for的key的作用以及实现原理

Vue框架采用了虚拟Dom机制+diff算法来提高渲染效率, 只有真正改变的dom元素才会重新渲染

虚拟dom就是在内存当中的dom对象
diff算法是一种能够快速的比较两个事物不同之处的算法

新的虚拟dom和旧的虚拟dom比较原则: 根据v-for指令所在的标签的key属性值(key存在于虚拟dom元素中是其的唯一标识)

先拿key的属性值进行比较, 如果属性值相同则继续比较子元素(key属性是dom元素的唯一标识)
- 子元素不同：直接将新的虚拟dom元素渲染到页面生成新的真实dom元素
- 子元素相同：直接复用之前的真实dom
如果key不同直接将新的虚拟dom元素渲染到页面生成新的真实dom元素

在这里插入图片描述

如果没有指定标签的key属性，会自动拿index作为key属性的值, 这种方式效率低复用性差, 另外操作数组当中的非末尾元素时容易发生错乱

选中页面上全部的复选框, 此时的真实DOM就是选中时的状态,所以复用时添加的tom也是选中的状态

在这里插入图片描述

<body><div id="app"><h1>{{msg}}</h1><button @click="addFirst">在数组第一个位置添加 tom</button><button @click="addLast">在数组最后位置添加 vue</button><table><tr><th>序号</th><th>姓名</th><th>邮箱</th><th>选择</th></tr><tr v-for="(vip,index) of vips" :key="index"><td>{{index + 1}}</td><td>{{vip.name}}</td><td>{{vip.email}}</td><td><input type="checkbox"></td></tr></table></div><script>const vm = new Vue({el : '#app', data : {msg : 'key原理(虚拟dom与diff算法)', vips : [{id:'100',name:'jack',email:'jack@123.com'}, {id:'200',name:'lucy',email:'lucy@123.com'}, {id:'300',name:'james',email:'james@123.com'}]}, methods : {addFirst(){this.vips.unshift({id:'400',name:'tom',email:'tom@123.com'})}, addLast(){this.vips.push({id:'500',name:'vue',email:'vue@123.com'})}}})</script>
</body>

指定对象的id作为key属性的值 , 因为id是唯一的所以不会出现错乱问题

在这里插入图片描述

列表过滤和排序

列表过滤

监视文本框中输入的数据,根据用户输入的关键字对原数组进行过滤,将新数组渲染到页面

使用watch配置项:需要定义一个数组用来接收过滤后的数组
使用computed配置项:不需要定义数组,直接返回过滤后的数组就是计算属性的值

let arr = [1,2,3,4,5,6,7,8,9]
// filter不会破坏原数组的结构，会生成一个全新的数组
let newArr = arr.filter((num) => {//return 过滤规则return num < 5
})console.log(newArr)

<body><div id="app"><h1>{{msg}}</h1><input type="text" placeholder="请输入搜索关键字" v-model="keyword"><table><tr><th>序号</th><th>英雄</th><th>能量值</th><th>选择</th></tr><tr v-for="(hero,index) in filteredHeros" :key="hero.id"><td>{{index+1}}</td><td>{{hero.name}}</td><td>{{hero.power}}</td><td><input type="checkbox"></td></tr></table></div><script>const vm = new Vue({el : '#app',data : {keyword : '',msg : '列表过滤',heros : [{id:'101',name:'艾格文',power:10000},{id:'102',name:'麦迪文',power:9000},{id:'103',name:'古尔丹',power:8000},{id:'104',name:'萨尔',power:6000}],filteredHeros : []},watch : {// 页面初次加载时就调用handler函数keyword : {immediate : true,handler(val){this.filteredHeros = this.heros.filter((hero) => {// 执行过滤规则return hero.name.indexOf(val) >= 0})}}}computed : {filteredHeros(){// 返回数组作为计算属性的值return this.heros.filter((hero) => {// 执行过滤规则return hero.name.indexOf(this.keyword) >= 0})}}})</script>
</body>

列表排序

let arr = [8,9,5,4,1,2,3]
// sort方法排序之后，不会生成一个新的数组，是在原数组的基础之上进行排序，会影响原数组的结构
arr.sort((a, b) => {return b - a
})
console.log(arr)

<body><div id="app"><h1>{{msg}}</h1><input type="text" placeholder="请输入搜索关键字" v-model="keyword"><button @click="type = 1">升序</button><button @click="type = 2">降序</button><button @click="type = 0">原序</button><table><tr><th>序号</th><th>英雄</th><th>能量值</th><th>选择</th></tr><tr v-for="(hero,index) in filteredHeros" :key="hero.id"><td>{{index+1}}</td><td>{{hero.name}}</td><td>{{hero.power}}</td><td><input type="checkbox"></td></tr></table></div><script>const vm = new Vue({el : '#app',data : {type : 0,keyword : '',msg : '列表排序',heros : [{id:'101',name:'艾格文',power:10000},{id:'102',name:'麦迪文',power:9000},{id:'103',name:'古尔丹',power:8000},{id:'104',name:'萨尔',power:11000}]},computed : {filteredHeros(){//  排序会影响原数组的结构const arr = this.heros.filter((hero) => {// 执行过滤规则return hero.name.indexOf(this.keyword) >= 0})// 排序if(this.type === 1){// a和b是一个对象arr.sort((a, b) => {return a.power - b.power})}else if(this.type == 2){arr.sort((a, b) => {return b.power - a.power})}// 返回新数组作为计算属性的值return arr}}})</script>
</body>

收集表单数据

阻止表单的默认提交行为的方式

给form标签添加@submit.prevent
给button按钮添加@click.prevent

<body><div id="app"><h1>{{msg}}</h1><!--阻止表单的默认提交行为--><form @submit.prevent="send"><!--v-model.trim去除字符串的前后空白-->用户名：<input type="text" v-model.trim="user.username"><br><br>密码：<input type="password" v-model="user.password"><br><br><!--v-model.number可以将收集到的字符串转化为数字保存-->年龄：<input type="number" v-model.number="user.age"><br><br>性别：<!--同一组(name属性值相同)的单选按钮才只能选一个-->男<input type="radio" name="gender" value="1" v-model="user.gender">女<input type="radio" name="gender" value="0" v-model="user.gender"><br><br>爱好：<!--对于checkbox来说，如果没有手动指定value，那么会拿这个标签的checked属性的值作为value(选中为true,未选中为false)-->旅游<input type="checkbox" v-model="user.interest" value="travel">运动<input type="checkbox" v-model="user.interest" value="sport">唱歌<input type="checkbox" v-model="user.interest" value="sing"><br><br>学历：<select v-model="user.grade"><option value="">请选择学历</option><option value="zk">专科</option><option value="bk">本科</option><option value="ss">硕士</option></select><br><br>简介：<!--标签体当中的内容就是文本域的value--><!--v-model.lazy失去焦点后才开始收集表单数据--><textarea cols="50" rows="15" v-model.lazy="user.introduce"></textarea><br><br><input type="checkbox" v-model="user.accept">阅读并接受协议<br><br><!--<button @click.prevent="send">注册</button>--><button>注册</button></form></div><script>const vm = new Vue({el : '#app',data : {user : {username : '',password : '',age : '',// 默认选中指定表单的value值gender : '1',// 复选框的value采用数组接收interest : ['travel'],grade : 'ss',introduce : '',accept : ''},msg : '表单数据的收集'},methods : {send(){alert('ajax...!!!!')// 将数据收集好，发送给服务器console.log(JSON.stringify(this.user))}}})</script>
</body>

过滤器filters

过滤器适用于简单的逻辑处理,可以进行全局配置或局部配置

全局配置：在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置,可以在任何一个容器中使用
局部配置：在构建Vue实例的配置项中使用filters 进行局部配置,只能在当前绑定的容器中使用

过滤器可以用在插值语法和v-bind指令中,可以对一些数据进行格式化显示

过滤器也可以接收额外的参数，但过滤器的第一个参数永远接收的都是前一个过滤器的返回值
多个过滤器可以串联{{msg | filterA | filterB | filterC}}
由于过滤器的功能完全可以使用methods，computed 来实现,在Vue3当中已经将过滤器语法废弃了

<body><!--从服务器端返回一个商品的价格price，如果price的值是''、null、undefined页面上统一显示为 - , 反之显示真实的数字--><div id="app"><h1>{{msg}}</h1><h2>商品价格：{{formatPrice}}</h2><h2>商品价格：{{formatPrice2()}}</h2><h2>商品价格：{{price | filterA | filterB(3)}}</h2><input type="text" :value="price | filterA | filterB(3)"></div><!--在另一个容器中使用全局的过滤器--><div id="app2"><h2>商品价格：{{price | filterA | filterB(3)}}</h2></div><script>// 配置全局的过滤器可以在另一个容器中使用Vue.filter('filterA', function(val){if(val === null || val === undefined || val === ''){return '-'}return val})Vue.filter('filterB', function(val, number){return val.toFixed(number)})const vm2 = new Vue({el : '#app2',data : {price : 20.3}})const vm = new Vue({el : '#app',data : {msg : '过滤器',price : 50.6},methods: {formatPrice2(){if(this.price === '' || this.price === undefined || this.price === null){return '-'}return this.price}},computed : {formatPrice(){if(this.price === '' || this.price === undefined || this.price === null){return '-'}return this.price}},// 局部过滤器filters : {filterA(val){if(val === null || val === undefined || val === ''){return '-'}return val},filterB(val, number){// 确保传递过来的数据val，保留number位小数return val.toFixed(number)}} })</script>
</body>