Vue2(3)

发布于：2023-01-14 ⋅ 阅读:(489) ⋅ 点赞:(0)

目录

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属性和计算属性都能使用时，优先使用计算属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <ul>
        <li v-for="(p,index) of fillPersons" :key="index">
          {{p.name}}---{{p.age}}-----{{p.sex}}
        </li>
      </ul>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    // 用watch实现
    // #region
    /* new Vue({
      el: "#root",
      data: {
        keyWord:'',
        persons: [
          { id: "001", name: "马冬梅", age: 19,sex:'女' },
          { id: "002", name: "周冬雨", age: 20,sex:'女' },
          { id: "003", name: "周杰伦", age: 21,sex:'男' },
          { id: "004", name: "周兆伦", age: 22,sex:'男' },
        ],
        fillPersons:[]
      },
      watch:{
            // console.log('keyWord被改了',val);
            // this.fillPersons=this.persons.filter((p)=>{
            //     return p.name.indexOf(val)!==-1
            // })
            immediate:true,
            handler(val){
                this.fillPersons=this.persons.filter((p)=>{
                return p.name.indexOf(val)!==-1
            })
        }
      }
    }) */

    new Vue({
        el:'#root',
        data: {
        keyWord:'',
        persons: [
          { id: "001", name: "马冬梅", age: 19,sex:'女' },
          { id: "002", name: "周冬雨", age: 20,sex:'女' },
          { id: "003", name: "周杰伦", age: 21,sex:'男' },
          { id: "004", name: "周兆伦", age: 22,sex:'男' },
        ]
      },
      computed:{
        fillPersons(){
            return this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord)!==-1
            })
        }
      }

    })
  </script>
</html>

列表排序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <button @click="sortType=2">年龄升序</button>
      <button @click="sortType=1">年龄降序</button>
      <button @click="sortType=0">原顺序</button>
      <ul>
        <li v-for="(p,index) of fillPersons" :key="index">
          {{p.name}}---{{p.age}}-----{{p.sex}}
        </li>
      </ul>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data: {
        keyWord:'',
        sortType:0,//0原顺序  1降序  2升序
        persons: [
          { id: "001", name: "马冬梅", age: 30,sex:'女' },
          { id: "002", name: "周冬雨", age: 31,sex:'女' },
          { id: "003", name: "周杰伦", age: 18,sex:'男' },
          { id: "004", name: "周兆伦", age: 19,sex:'男' },
        ]
      },
      computed:{
        fillPersons(){
            const arr=this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord)!==-1
            })
            // 判断是否需要排序
            if(this.sortType){
                arr.sort((p1,p2)=>{
                    return this.sortType===1?p2.age-p1.age:p1.age-p2.age
                })
            }
            return arr
        }
      }

    })
    /* let arr=[1,3,2,4,5,6]
    arr.sort((a,b)=>{
        return b-a
    })
    console.log(arr); */
  </script>
</html>

更新时的一个问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>人员列表</h2>
      <button @click="updateMei">更新马冬梅的信息</button>
      <ul>
        <li v-for="(p,index) of persons" :key="p.id">
          {{p.name}}---{{p.age}}-----{{p.sex}}
        </li>
      </ul>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    const vm=new Vue({
        el:'#root',
        data: {
        persons: [
          { id: "001", name: "马冬梅", age: 30,sex:'女' },
          { id: "002", name: "周冬雨", age: 31,sex:'女' },
          { id: "003", name: "周杰伦", age: 18,sex:'男' },
          { id: "004", name: "周兆伦", age: 19,sex:'男' },
        ]
      },
      methods:{
        updateMei(){
             this.persons[0]={id:'001',name:'马老师',age:50,sex:'男'}
        }
      }
    })
  </script>
</html>

Vue.set()方法

参数

  1. target
  2. propertyName
  3. index

用法：

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校信息</h1>
      <h2>学校名称：{{school.name}}</h2>
      <h2>学校地址：{{school.address}}</h2>
      <h2>校长是：{{school.leader}}</h2>
      <hr />
      <h1>学生信息</h1>
      <button @click="addSex">添加一个性别属性，默认值是男</button>
      <h2>姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}----{{f.age}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    const vm = new Vue({
      el: "#root",
      data: {
        school: {
            name: "guigu",
            address: "北京",
          },
        student: {
          name: "学生",
          age: {
            rAge: 40,
            sAge: 29,
          },
          friends: [
            { name: "朋友a", age: 18 },
            { name: "朋友b", age: 19 },
          ],
          
        },
      },
      methods: {
          addSex() {
            // Vue.set(this.student, 'sex', '男');
            this.$set(this.student,'sex','男')
          },
        },
    });
  </script>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校信息</h1>
      <h2>学校名称：{{school.name}}</h2>
      <h2>学校地址：{{school.address}}</h2>
      <h2>校长是：{{school.leader}}</h2>
      <hr />
      <h1>学生信息</h1>
      <button @click="addSex">添加一个性别属性，默认值是男</button>
      <h2>姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
      <h2>爱好</h2>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
          {{h}}
        </li>
      </ul>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}----{{f.age}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    const vm = new Vue({
      el: "#root",
      data: {
        school: {
            name: "guigu",
            address: "北京",
          },
        student: {
          name: "学生",
          age: {
            rAge: 40,
            sAge: 29,
          },
          hobby:['抽烟','喝酒','烫头'],
          friends: [
            { name: "朋友a", age: 18 },
            { name: "朋友b", age: 19 },
          ],
          
        },
      },
      methods: {
          addSex() {
            // Vue.set(this.student, 'sex', '男');
            this.$set(this.student,'sex','男')
          },
        },
    });
  </script>
</html>

总结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的根数据对象添加属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学生信息</h1>

      <button @click="student.age++">年龄+1岁</button><br>
      <button @click="addSex">添加一个性别属性，默认值是男</button><br>
      <button @click="student.sex='未知'">修改性别</button><br>
      <button @click="addFriend">在列表首位添加一个朋友</button><br>
      <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br>
      <button @click="addHobby">添加一个爱好</button><br>
      <button @click="updateHobby">修改第一个爱好</button><br>
      
      <h2>学生姓名：{{student.name}}</h3>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：{{student.age}}</h2>
      <h2>爱好</h2>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
      </ul>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}----{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    new Vue({
      el: "#root",
      data: {
        student: {
          name: "tom",
          age: 18,
          hobby: ["抽烟", "喝酒", "烫头"],
          friends: [
            { name: "a", age: 35 },
            { name: "b", age: 25 },
          ],
        },
      },
      methods: {
        addSex() {
          // Vue.set(this.student,'sex','男')
          this.$set(this.student, "sex", "男");
        },
        addFriend(){
            this.student.friends.unshift({name:'c',age:70})
        },
        updateFirstFriendName(){
            this.student.friends[0].name='张三'
        },
        addHobby(){
            this.student.hobby.push('学习')
        },
        updateHobby(){
            // this.student.hobby.splice(0,1,'看书')
            // Vue.set(this.student.hobby,0,'看书')
            this.$set(this.student.hobby,0,'看书')

        }
      },
    });
  </script>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布