• Vue2(3)

    目录

    key的作用及原理

    列表过滤

    列表排序

    更新时的一个问题

    Vue.set()方法

     Vue监测数据的原理——数组

    总结Vue监视数据

    key的作用及原理

    面试题：react、vue中的key有什么作用？（key的内部原理）

    1.虚拟DOM中key的作用：

    key是虚拟DOM对象的表示，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下

    2.对比规则：

    1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

    1. 若虚拟DOM中内容没变，直接使用之前的真实DOM
    2. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

    2）旧虚拟DOM中没找到与虚拟DOM相同的key

    • 创建新的真实DOM，随后渲染到页面

    3.用index作为key可能会引发的问题

    1. 若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新==>界面效果没问题，但效率低
    2. 如果结构中还包含输入类的DOM：会产生错误DOM更新==>界面有问题

    4.开发中如何选择key？

    1. 最好使用每条数据的唯一标识作为key，比如id，手机号、身份证号、学号等唯一值。
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    列表过滤

    当watch属性和计算属性都能使用时，优先使用计算属性

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       
    13.       <h2>人员列表h2>
    14.       <input type="text" placeholder="请输入名字" v-model="keyWord">
    15.       <ul>
    16.         <li v-for="(p,index) of fillPersons" :key="index">
    17.           {{p.name}}---{{p.age}}-----{{p.sex}}
    18.         li>
    19.       ul>
    20.       ul>
    21.     div>
    22.   body>
    23.   <script>
    24.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    25.     // 用watch实现
    26.     // #region
    27.     /* new Vue({
    28.       el: "#root",
    29.       data: {
    30.         keyWord:'',
    31.         persons: [
    32.           { id: "001", name: "马冬梅", age: 19,sex:'女' },
    33.           { id: "002", name: "周冬雨", age: 20,sex:'女' },
    34.           { id: "003", name: "周杰伦", age: 21,sex:'男' },
    35.           { id: "004", name: "周兆伦", age: 22,sex:'男' },
    36.         ],
    37.         fillPersons:[]
    38.       },
    39.       watch:{
    40.             // console.log('keyWord被改了',val);
    41.             // this.fillPersons=this.persons.filter((p)=>{
    42.             //     return p.name.indexOf(val)!==-1
    43.             // })
    44.             immediate:true,
    45.             handler(val){
    46.                 this.fillPersons=this.persons.filter((p)=>{
    47.                 return p.name.indexOf(val)!==-1
    48.             })
    49.         }
    50.       }
    51.     }) */
    52.  
    53.     new Vue({
    54.         el:'#root',
    55.         data: {
    56.         keyWord:'',
    57.         persons: [
    58.           { id: "001", name: "马冬梅", age: 19,sex:'女' },
    59.           { id: "002", name: "周冬雨", age: 20,sex:'女' },
    60.           { id: "003", name: "周杰伦", age: 21,sex:'男' },
    61.           { id: "004", name: "周兆伦", age: 22,sex:'男' },
    62.         ]
    63.       },
    64.       computed:{
    65.         fillPersons(){
    66.             return this.persons.filter((p)=>{
    67.                 return p.name.indexOf(this.keyWord)!==-1
    68.             })
    69.         }
    70.       }
    71.  
    72.     })
    73.   script>
    74. html>

    列表排序

    vue高仿饿了么外卖商家点餐小项目
    zip 0星 超过10%的资源 20.85MB
    下载
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       
    13.       <h2>人员列表h2>
    14.       <input type="text" placeholder="请输入名字" v-model="keyWord">
    15.       <button @click="sortType=2">年龄升序button>
    16.       <button @click="sortType=1">年龄降序button>
    17.       <button @click="sortType=0">原顺序button>
    18.       <ul>
    19.         <li v-for="(p,index) of fillPersons" :key="index">
    20.           {{p.name}}---{{p.age}}-----{{p.sex}}
    21.         li>
    22.       ul>
    23.       ul>
    24.     div>
    25.   body>
    26.   <script>
    27.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    28.  
    29.     new Vue({
    30.         el:'#root',
    31.         data: {
    32.         keyWord:'',
    33.         sortType:0,//0原顺序  1降序  2升序
    34.         persons: [
    35.           { id: "001", name: "马冬梅", age: 30,sex:'女' },
    36.           { id: "002", name: "周冬雨", age: 31,sex:'女' },
    37.           { id: "003", name: "周杰伦", age: 18,sex:'男' },
    38.           { id: "004", name: "周兆伦", age: 19,sex:'男' },
    39.         ]
    40.       },
    41.       computed:{
    42.         fillPersons(){
    43.             const arr=this.persons.filter((p)=>{
    44.                 return p.name.indexOf(this.keyWord)!==-1
    45.             })
    46.             // 判断是否需要排序
    47.             if(this.sortType){
    48.                 arr.sort((p1,p2)=>{
    49.                     return this.sortType===1?p2.age-p1.age:p1.age-p2.age
    50.                 })
    51.             }
    52.             return arr
    53.         }
    54.       }
    55.  
    56.     })
    57.     /* let arr=[1,3,2,4,5,6]
    58.     arr.sort((a,b)=>{
    59.         return b-a
    60.     })
    61.     console.log(arr); */
    62.   script>
    63. html>

    更新时的一个问题

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       <h2>人员列表h2>
    13.       <button @click="updateMei">更新马冬梅的信息button>
    14.       <ul>
    15.         <li v-for="(p,index) of persons" :key="p.id">
    16.           {{p.name}}---{{p.age}}-----{{p.sex}}
    17.         li>
    18.       ul>
    19.       ul>
    20.     div>
    21.   body>
    22.   <script>
    23.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    24.  
    25.     const vm=new Vue({
    26.         el:'#root',
    27.         data: {
    28.         persons: [
    29.           { id: "001", name: "马冬梅", age: 30,sex:'女' },
    30.           { id: "002", name: "周冬雨", age: 31,sex:'女' },
    31.           { id: "003", name: "周杰伦", age: 18,sex:'男' },
    32.           { id: "004", name: "周兆伦", age: 19,sex:'男' },
    33.         ]
    34.       },
    35.       methods:{
    36.         updateMei(){
    37.              this.persons[0]={id:'001',name:'马老师',age:50,sex:'男'}
    38.         }
    39.       }
    40.     })
    41.   script>
    42. html>

    Vue.set()方法

    参数

    1. target
    2. propertyName
    3. index

    用法：

    向响应式对象添加一个property，并确保这个property同样是响应式的，且触发视图更新。它必须用于响应式对象上添加新property，因为Vue无法探测普通的新增property。

    注意：对象不能是Vue实例，或者Vue实例的根数据对象。

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       <h1>学校信息h1>
    13.       <h2>学校名称：{{school.name}}h2>
    14.       <h2>学校地址：{{school.address}}h2>
    15.       <h2>校长是：{{school.leader}}h2>
    16.       <hr />
    17.       <h1>学生信息h1>
    18.       <button @click="addSex">添加一个性别属性，默认值是男button>
    19.       <h2>姓名：{{student.name}}h2>
    20.       <h2 v-if="student.sex">性别：{{student.sex}}h2>
    21.       <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}h2>
    22.       <h2>朋友们h2>
    23.       <ul>
    24.         <li v-for="(f,index) in student.friends" :key="index">
    25.           {{f.name}}----{{f.age}}
    26.         li>
    27.       ul>
    28.     div>
    29.   body>
    30.  
    31.   <script>
    32.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    33.  
    34.     const vm = new Vue({
    35.       el: "#root",
    36.       data: {
    37.         school: {
    38.             name: "guigu",
    39.             address: "北京",
    40.           },
    41.         student: {
    42.           name: "学生",
    43.           age: {
    44.             rAge: 40,
    45.             sAge: 29,
    46.           },
    47.           friends: [
    48.             { name: "朋友a", age: 18 },
    49.             { name: "朋友b", age: 19 },
    50.           ],
    51.           
    52.         },
    53.       },
    54.       methods: {
    55.           addSex() {
    56.             // Vue.set(this.student, 'sex', '男');
    57.             this.$set(this.student,'sex','男')
    58.           },
    59.         },
    60.     });
    61.   script>
    62. html>

     Vue监测数据的原理——数组

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       <h1>学校信息h1>
    13.       <h2>学校名称：{{school.name}}h2>
    14.       <h2>学校地址：{{school.address}}h2>
    15.       <h2>校长是：{{school.leader}}h2>
    16.       <hr />
    17.       <h1>学生信息h1>
    18.       <button @click="addSex">添加一个性别属性，默认值是男button>
    19.       <h2>姓名：{{student.name}}h2>
    20.       <h2 v-if="student.sex">性别：{{student.sex}}h2>
    21.       <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}h2>
    22.       <h2>爱好h2>
    23.       <ul>
    24.         <li v-for="(h,index) in student.hobby" :key="index">
    25.           {{h}}
    26.         li>
    27.       ul>
    28.       <h2>朋友们h2>
    29.       <ul>
    30.         <li v-for="(f,index) in student.friends" :key="index">
    31.           {{f.name}}----{{f.age}}
    32.         li>
    33.       ul>
    34.     div>
    35.   body>
    36.  
    37.   <script>
    38.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    39.  
    40.     const vm = new Vue({
    41.       el: "#root",
    42.       data: {
    43.         school: {
    44.             name: "guigu",
    45.             address: "北京",
    46.           },
    47.         student: {
    48.           name: "学生",
    49.           age: {
    50.             rAge: 40,
    51.             sAge: 29,
    52.           },
    53.           hobby:['抽烟','喝酒','烫头'],
    54.           friends: [
    55.             { name: "朋友a", age: 18 },
    56.             { name: "朋友b", age: 19 },
    57.           ],
    58.           
    59.         },
    60.       },
    61.       methods: {
    62.           addSex() {
    63.             // Vue.set(this.student, 'sex', '男');
    64.             this.$set(this.student,'sex','男')
    65.           },
    66.         },
    67.     });
    68.   script>
    69. html>

    Vue2实践揭秘(全)
    zip 4星 超过75%的资源 184.11MB
    下载

    总结Vue监视数据

    1.Vue会监视data中所有层次的数据

    2.如何监测对象中的数据？

    通过setter实现监视，且要在new Vue时就传入要监测的数据

    • 对象中后追加的属性，Vue默认不做响应式处理
    • 如需给后添加的属性做响应式，请使用如下API:
    • Vue.set(target,propertyName/index,value)
    • vm.$set(target,propertyName/index,value)

    3.如何监测数组中的数据？

    通过包裹数组更新元素的方法实现，本质就是做了两件事：

    1. 调用原生对应的方法对数组进行更新
    2. 重新解析模板，进而更新页面

    4.在Vue修改数组中的某个元素一定要用如下方法：

    1. 使用这些API：push()  pop()  shift()  unshift()  splice()  sort()  reverse()
    2. Vue.set()或vm.$set

    特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="root">
    12.       <h1>学生信息h1>
    13.  
    14.       <button @click="student.age++">年龄+1岁button><br>
    15.       <button @click="addSex">添加一个性别属性，默认值是男button><br>
    16.       <button @click="student.sex='未知'">修改性别button><br>
    17.       <button @click="addFriend">在列表首位添加一个朋友button><br>
    18.       <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三button><br>
    19.       <button @click="addHobby">添加一个爱好button><br>
    20.       <button @click="updateHobby">修改第一个爱好button><br>
    21.       
    22.       <h2>学生姓名：{{student.name}}h3>
    23.       <h2 v-if="student.sex">性别：{{student.sex}}h2>
    24.       <h2>年龄：{{student.age}}h2>
    25.       <h2>爱好h2>
    26.       <ul>
    27.         <li v-for="(h,index) in student.hobby" :key="index">{{h}}li>
    28.       ul>
    29.       <h2>朋友们h2>
    30.       <ul>
    31.         <li v-for="(f,index) in student.friends" :key="index">
    32.           {{f.name}}----{{f.age}}
    33.         li>
    34.       ul>
    35.     div>
    36.   body>
    37.   <script>
    38.     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    39.     new Vue({
    40.       el: "#root",
    41.       data: {
    42.         student: {
    43.           name: "tom",
    44.           age: 18,
    45.           hobby: ["抽烟", "喝酒", "烫头"],
    46.           friends: [
    47.             { name: "a", age: 35 },
    48.             { name: "b", age: 25 },
    49.           ],
    50.         },
    51.       },
    52.       methods: {
    53.         addSex() {
    54.           // Vue.set(this.student,'sex','男')
    55.           this.$set(this.student, "sex", "男");
    56.         },
    57.         addFriend(){
    58.             this.student.friends.unshift({name:'c',age:70})
    59.         },
    60.         updateFirstFriendName(){
    61.             this.student.friends[0].name='张三'
    62.         },
    63.         addHobby(){
    64.             this.student.hobby.push('学习')
    65.         },
    66.         updateHobby(){
    67.             // this.student.hobby.splice(0,1,'看书')
    68.             // Vue.set(this.student.hobby,0,'看书')
    69.             this.$set(this.student.hobby,0,'看书')
    70.  
    71.         }
    72.       },
    73.     });
    74.   script>
    75. html>
  • 相关阅读:
    chatgpt赋能python：Python数值计算指南：为什么它是一种强大的工具
    百趣代谢组学资讯：寻求多年，黄瓜品质好的秘密居然在这里
    笔试刷题汇总
    分数阶混沌系统李雅普指数和分岔图
    java计算机毕业设计航帆学院网站MyBatis+系统+LW文档+源码+调试部署
    Primavera Unifier 报表管理系统 (再次总结)
    让 sdk 包静默升级的 SAO 操作，你见过几种？
    如何做到百万数据半小时跑批结束
    ASP.NET Core 6.0 启动方式
    MySQL学习笔记22
  • 原文地址：https://blog.csdn.net/m0_62520946/article/details/126347718