vlambda博客
学习文章列表

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32

“

提到的js基础我这里记录一下

this指向

js异步编程

引用传值

”

015-事件修饰符

代码:

<body>

  <!-- 准备好一个容器-->
  <div id="root">
   <h2>欢迎来到{{name}}学习</h2>
   <!-- 阻止默认事件（常用） -->
   <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

   <!-- 阻止事件冒泡（常用） -->
   <div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
   </div>

   <!-- 事件只触发一次（常用） -->
   <button @click.once="showInfo">点我提示信息</button>

   <!-- 使用事件的捕获模式 -->
   <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
     div2
    </div>
   </div>

   <!-- 只有event.target是当前操作的元素时才触发事件； -->
   <div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
   </div>

   <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
   <ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>

  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    name:'尚硅谷'
   },
   methods:{
    showInfo(e){
     alert('同学你好！')
     // console.log(e.target)
    },
    showMsg(msg){
     console.log(msg)
    },
    demo(){
     for (let i = 0; i < 100000; i++) {
      console.log('#')
     }
     console.log('累坏了')
    }
   }
  })
 </script>

笔记

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用);

2..stop：阻止事件冒泡（常用);

3..once：事件只触发一次（常用）

4..capture：使用事件的捕获模式；

5..self：只有event.target是当前操作的元素时才触发事件；

6..passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

“

记住前几个就行~

”

016-键盘事件

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>欢迎来到{{name}}学习</h2>
   <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

  new Vue({
   el:'#root',
   data:{
    name:'尚硅谷'
   },
   methods: {
    showInfo(e){
     // console.log(e.key,e.keyCode)
     console.log(e.target.value)
    }
   },
  })
 </script>

小细节:

  • keyup: 按下抬起会触发(一般这个)

  • keydown:按下触发

// 不传参也可以获取event哦

  • e.keyCode 获取当前点击的按键的码儿

笔记:

  1. Vue中常用的按键别名：

    • 回车 => enter
    • 删除 => delete (捕获“删除”和“退格”键)
    • 退出 => esc
    • 空格 => space
    • 换行 => tab (特殊，必须配合keydown去使用)
    • 上 => up
    • 下 => down
    • 左 => left
    • 右 => right

  2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

  3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

    • 配合keydown使用：正常触发事件。

  4. 也可以使用keyCode去指定具体的按键（不推荐）

“

前面刚用...

”
  1. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

017-事件总结

  1. @ 绑定事件
  2. 事件如何传值?
  3. 事件传参的$event什么时候写?
  4. 事件修饰符有什么?常用的呢?
  5. 常用的键盘事件

018-姓名案例

“

先插值语法写

再methods写

再计算属性写

”

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{firstName}}-{{lastName}}</span>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    firstName:'张',
    lastName:'三'
   }
  })
 </script>

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{fullName()}}</span>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    firstName:'张',
    lastName:'三'
   },
   methods: {
    fullName(){
     console.log('@---fullName')
     return this.firstName + '-' + this.lastName
    }
   },
  })
 </script>

注意点:

  1. 注意{{}}里的函数加不加括号的问题
  2. 任何data里内容更改都会引起重新解析模板,模板涉及到的函数也会重新调用

019-计算属性

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   测试：<input type="text" v-model="x"> <br/><br/>
   全名：<span>{{fullName}}</span> <br/><br/>
   <!-- 全名：<span>{{fullName}}</span> <br/><br/>
   全名：<span>{{fullName}}</span> <br/><br/>
   全名：<span>{{fullName}}</span> -->
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    firstName:'张',
    lastName:'三',
    x:'你好'
   },
   methods: {
    demo(){
     
    }
   },
   computed:{
    fullName:{
     //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
     //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
     get(){
      console.log('get被调用了')
      // console.log(this) //此处的this是vm
      return this.firstName + '-' + this.lastName
     },
     //set什么时候调用? 当fullName被修改时。
     set(value){
      console.log('set',value)
      const arr = value.split('-')
      this.firstName = arr[0]
      this.lastName = arr[1]
     }
    }
   }
  })
 </script>
“

挂载computed属性的时候,会调用其getter然后把返回值赋值给对应属性.

”
image-20220510152619168
【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512105239658

计算属性优势:

  • methods 改变页面数据,页面上数据改变就重新解析模板,涉及到的methods里面的内容都会重新执行.因为其不知道你返回结果是否发生改变.

  • computed改变页面数据时,因为设置了getter,setter, 触发setter,setter关联data里数据(说白了就是去修改this.巴拉巴拉),因此就实现了computed属性修改了data的变化,触发响应式.

“

没改变就不会触发响应式,也就是缓存了~ 获取的时候就直接把值返回了

也能广义上交缓存吧..见很多老师都这么讲

”

笔记

计算属性：

  1. 定义：要用的属性不存在，要通过已有属性 计算得来。

  2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

  3. get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。

  4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：

  1. 计算属性最终会出现在vm上，直接读取使用即可。

  2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

020-计算属性_简写

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{fullName}}</span> <br/><br/>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    firstName:'张',
    lastName:'三',
   },
   computed:{
    //完整写法
    /* fullName:{
     get(){
      console.log('get被调用了')
      return this.firstName + '-' + this.lastName
     },
     set(value){
      console.log('set',value)
      const arr = value.split('-')
      this.firstName = arr[0]
      this.lastName = arr[1]
     }
    } */
    //简写
    fullName(){
     console.log('get被调用了')
     return this.firstName + '-' + this.lastName
    }
   }
  })
 </script>

  • 一般不写setter,因为都是只读取属性~不改,因此有个简写

  • 写的是一个方法,但是依旧vm里存的是一个属性.

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512111115675
“

注意哦,是存在vm下,不是存在computed属性下.很重要

因此我们就能得出如果计算属性和data重名会报错,不信你试试.

”

疑问?为什么能满足这种缩写?

我这里验证一下,计算属性的缩写.

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512112731444

js里依旧是不一样的, 只不过结果一样...

简写以后是一个函数,简写前是一个对象,有一个getter.

如我前面说的~

但是vue里都是哦,两种写法打印出来都是fullname,和data无区别.

随便写一个methods,打印下

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512131155607

只能找源码了~宏观解决不了

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512131859980

可以看到这句话从options里取了computed 初始化了一下.找这段代码

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
image-20220512132105299

computed[key]就是我上面打印的,函数直接把getter变成这个函数,如果不是就是getter..

和张天禹老师说的一样没毛病.所以以后咱们也可以把自己的方法应用上

021-天气案例

“

先自己写哦

”

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
   <!-- <button @click="isHot = !isHot">切换天气</button> -->
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
  })
 </script>
“

挺标准的 不会背下来即可~

”

022-监视属性

代码:

<body>
  <!-- 
    监视属性watch：
     1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
     2.监视的属性必须存在，才能进行监视！！
     3.监视的两种写法：
       (1).new Vue时传入watch配置
       (2).通过vm.$watch监视
   -->
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   /* watch:{
    isHot:{
     immediate:true, //初始化时让handler调用一下
     //handler什么时候调用？当isHot发生改变时。
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    }
   } */
  })

  vm.$watch('isHot',{
   immediate:true, //初始化时让handler调用一下
   //handler什么时候调用？当isHot发生改变时。
   handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
   }
  })
 </script>

两种写法怎么判断?

刚开始写的时候如果就知道自己要监视谁就直接写 watch属性.内部值是需要监视的值.//不存在的值不会报错.

如果后面才知道需要监视的时候就要vm.$watch.

023-深度监视

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
   <hr/>
   <h3>a的值是:{{numbers.a}}</h3>
   <button @click="numbers.a++">点我让a+1</button>
   <h3>b的值是:{{numbers.b}}</h3>
   <button @click="numbers.b++">点我让b+1</button>
   <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
   {{numbers.c.d.e}}
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
    numbers:{
     a:1,
     b:1,
     c:{
      d:{
       e:100
      }
     }
    }
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    isHot:{
     // immediate:true, //初始化时让handler调用一下
     //handler什么时候调用？当isHot发生改变时。
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    },
    //监视多级结构中某个属性的变化
    /* 'numbers.a':{
     handler(){
      console.log('a被改变了')
     }
    } */
    //监视多级结构中所有属性的变化
    numbers:{
     deep:true,
     handler(){
      console.log('numbers改变了')
     }
    }
   }
  })

 </script>
“

其实"numbers.a"不高级,但是如果不咋用方括号的可能不知道. 方括号是能接收到这个的,点调用就报错了.

”
“

引用传值那个不细说了,很基础的

”

vue默认是能检测到 深层级改变的,但是提供给开发者的watch不行.

“

这里自己盲猜后面肯定给答案

”

笔记

深度监视：

  1. Vue中的watch默认不监测对象内部值的改变（一层）。

  2. 配置deep:true可以监测对象内部值改变（多层）。

备注：

  1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

  2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

024-监视的简写形式

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    //正常写法
    /* isHot:{
     // immediate:true, //初始化时让handler调用一下
     // deep:true,//深度监视
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    }, */
    //简写
    /* isHot(newValue,oldValue){
     console.log('isHot被修改了',newValue,oldValue,this)
    } */
   }
  })

  //正常写法
  /* vm.$watch('isHot',{
   immediate:true, //初始化时让handler调用一下
   deep:true,//深度监视
   handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
   }
  }) */

  //简写
  /* vm.$watch('isHot',(newValue,oldValue)=>{
   console.log('isHot被修改了',newValue,oldValue,this)
  }) */

 </script>

不用deep 这些配置的时候采用简写,没啥说的下一节

025-watch对比computed

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{fullName}}</span> <br/><br/>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    firstName:'张',
    lastName:'三',
    fullName:'张-三'
   },
   watch:{
    firstName(val){
     setTimeout(()=>{
      console.log(this)
      this.fullName = val + '-' + this.lastName
     },1000);
    },
    lastName(val){
     this.fullName = this.firstName + '-' + val
    }
   }
  })
 </script>

我写一下为什么计算属性不能异步

因为异步操作是不能return的~ return只是定时器的id.

笔记

computed和watch之间的区别：

  1. computed能完成的功能，watch都可以完成。

  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

这样this的指向才是vm 或 组件实例对象。

026-027-绑定class, style样式

代码:

<body>

  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

   <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
   <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

   <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
   <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

   <!-- 绑定style样式--对象写法 -->
   <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
   <!-- 绑定style样式--数组写法 -->
   <div class="basic" :style="styleArr">{{name}}</div>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false
  
  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    mood:'normal',
    classArr:['atguigu1','atguigu2','atguigu3'],
    classObj:{
     atguigu1:false,
     atguigu2:false,
    },
    styleObj:{
     fontSize: '40px',
     color:'red',
    },
    styleObj2:{
     backgroundColor:'orange'
    },
    styleArr:[
     {
      fontSize: '40px',
      color:'blue',
     },
     {
      backgroundColor:'gray'
     }
    ]
   },
   methods: {
    changeMood(){
     const arr = ['happy','sad','normal']
     const index = Math.floor(Math.random()*3)
     this.mood = arr[index]
    }
   },
  })
 </script>

笔记

绑定样式：

  1. class样式

  • 写法:class="xxx" xxx可以是字符串、对象、数组。

    “

    不好记就记住优先对象写法,但是如果发现好像都是固定的..就给他改成数组.

    ”
    • 字符串写法适用于：类名不确定，要动态获取。
    • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

  1. style样式

    • :style="{fontSize: xxx}"其中xxx是动态值。

    • :style="[a,b]"其中a、b是样式对象。

028-条件渲染

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>当前的n值是:{{n}}</h2>
   <button @click="n++">点我n+1</button>
   <!-- 使用v-show做条件渲染 -->
   <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
   <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

   <!-- 使用v-if做条件渲染 -->
   <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
   <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

   <!-- v-else和v-else-if -->
   <!-- <div v-if="n === 1">Angular</div>
   <div v-else-if="n === 2">React</div>
   <div v-else-if="n === 3">Vue</div>
   <div v-else>哈哈</div> -->

   <!-- v-if与template的配合使用 -->
   <template v-if="n === 1">
    <h2>你好</h2>
    <h2>尚硅谷</h2>
    <h2>北京</h2>
   </template>

  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    n:0
   }
  })
 </script>

笔记:

条件渲染：

  1. v-if

    写法:

    • v-if="表达式"
    • v-else-if="表达式"
    • v-else="表达式"
  • 适用于：切换频率较低的场景。
  • 特点：不展示的DOM元素直接被移除。
  • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

  1. v-show

    • 写法：v-show="表达式"

    • 适用于：切换频率较高的场景。

    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  2. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

029-列表渲染

代码

<body>
  <!-- 
    v-for指令:
      1.用于展示列表数据
      2.语法：v-for="(item, index) in xxx" :key="yyy"
      3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
  -->
  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 遍历数组 -->
   <h2>人员列表（遍历数组）</h2>
   <ul>
    <li v-for="(p,index) of persons" :key="index">
     {{p.name}}-{{p.age}}
    </li>
   </ul>

   <!-- 遍历对象 -->
   <h2>汽车信息（遍历对象）</h2>
   <ul>
    <li v-for="(value,k) of car" :key="k">
     {{k}}-{{value}}
    </li>
   </ul>

   <!-- 遍历字符串 -->
   <h2>测试遍历字符串（用得少）</h2>
   <ul>
    <li v-for="(char,index) of str" :key="index">
     {{char}}-{{index}}
    </li>
   </ul>
   
   <!-- 遍历指定次数 -->
   <h2>测试遍历指定次数（用得少）</h2>
   <ul>
    <li v-for="(number,index) of 5" :key="index">
     {{index}}-{{number}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'张三',age:18},
      {id:'002',name:'李四',age:19},
      {id:'003',name:'王五',age:20}
     ],
     car:{
      name:'奥迪A8',
      price:'70万',
      color:'黑色'
     },
     str:'hello'
    }
   })
  </script>
      
    </body>

笔记:

v-for指令:

1.用于展示列表数据

2.语法：v-for="(item, index) in xxx" :key="yyy"

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

030-key作用与原理

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 遍历数组 -->
   <h2>人员列表（遍历数组）</h2>
   <button @click.once="add">添加一个老刘</button>
   <ul>
    <li v-for="(p,index) of persons" :key="index">
     {{p.name}}-{{p.age}}
     <input type="text">
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'张三',age:18},
      {id:'002',name:'李四',age:19},
      {id:'003',name:'王五',age:20}
     ]
    },
    methods: {
     add(){
      const p = {id:'004',name:'老刘',age:40}
      this.persons.unshift(p)
     }
    },
   })
  </script>
    </body>
“

元素上的key最后不会被渲染在属性上.

”

下面内容是从 li的前侧生成一个新数据,并以非唯一表示 index作为key.

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
页面样式
【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
点击按钮后发生
【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
未改变前vue做了什么
【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
diff算法
“

个人感觉有点繁琐~我从目的角度出发解释一下

vue本身是为了方便,也就是同样的内容会选择复用. 这个ok?

当把index作为key,并且unshift,数组前生成时,key是不是会变换?(这个其实已经违背了唯一标识了, 本身就是个错误的方式,只不过比较经典所以大家都拿这个错误的例子来做提问 ,但是很少有人思考,本身就是错的方式,即使结果对了那也是巧合而已.)

key变换之后,vue并不会看后面的东西,他只认key,也就是说(这里对比下 人和机器)

人看到上面diff对比, 我们要的是 老刘和它对应的input 绑定.

vue看到的是, 你把 张三换成了 老刘而已,因为key才是vue趋向于第一判定的东西.

下面验证:

  1. vue匹配 第一行  key正常, 内容变(更改), 后面内容没变化复用.//检测不到变化的.在dom层面上.
  2. 第二行, key正常 李四变张三,input复用
  3. 一样
  4. 第四行, key新的,直接写就行.
”
【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记15-32
id为key
“

再解释这个,

第一行,key变了,ok不用思考了,vue认为是一个全新的li.

第二行,可以对应上了,后面内容没有变,直接复用

后面一样.

这个和自己写代码一样的,我们追求的是眼前的任务,完成即可,(软件工程上的一句话, 永远要相信自己的代码依旧有bug)因此,自己的代码必然有适合的场景和不适合的场景....你不按标准的方式去使用别人的代码 (你是测试么???????,当然为了面试 忍一忍.)

”

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

  1. 虚拟DOM中key的作用：

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

      (1)若虚拟DOM中内容没变, 直接使用之前的真实DOM！

      (2)若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key

      “

      顺序错了吧.

      应该是先找,没找到直接生成,未找到才看内容,没变复用,变了生成新的

      也行其实,小瑕疵~很厉害了.

      ”

    3. 创建新的真实DOM，随后渲染到到页面。

    4. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

    5. 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

    6. 对比规则：

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

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

  3. 开发中如何选择key?

    • 最好使用每条数据的唯一标识作为key , 比如id、手机号、身份证号、学号等唯一值。

    • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

      “

      还是我的观点,只是结果碰巧和正确结果一样,但是方式是不对的.

      类比小时候做选择题, 大神又快又nice, 标准答案虽然繁琐但是逻辑通顺,还有人是投骰子;一样的正确,但是方式啧啧啧,(况且,编码是要把过程露出来的,忒丢人~)

      ”

思考题:

image-20220514134445632
“

把input标签绑定了 key 会怎么样?

”
image-20220514140432658
“

完全没问题了. 从上面老师的解析可以看出来,只不过dom结构上vue识别不出来每一个input的区别,只要随便绑定个东西让他分出来区别即可.

从页面样式上看出来都是一样的,但是结果却不同,原因就是在每个input没区别.稍微加个区别即可

(so,你用了错误的方式问我一个问题,我能用一个更离谱的方式给你一个正确结果.

这是内卷.....)

”

031-列表过滤

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>人员列表</h2>
   <input type="text" placeholder="请输入名字" v-model="keyWord">
   <ul>
    <li v-for="(p,index) of filPerons" :key="index">
     {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   //用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:'男'}
     ],
     filPerons:[]
    },
    watch:{
     keyWord:{
      immediate:true,
      handler(val){
       this.filPerons = this.persons.filter((p)=>{
        return p.name.indexOf(val) !== -1
       })
      }
     }
    }
   }) */
   //#endregion
   
   //用computed实现
   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:{
     filPerons(){
      return this.persons.filter((p)=>{
       return p.name.indexOf(this.keyWord) !== -1
      })
     }
    }
   }) 
  </script>
    </body>

老规矩自己实现先~

“

中间有个思路, vue有个思路转换, 因为直接修改this.persons 不光会让原数组改变,再也回不来,以及会显示到页面上, 所以一般都取一个数组来获取,然后再决定怎么展示. 别修改原数据

(其实拿到后台那么一堆数据以后,也不会改原数据了~都是先存一次~)

”

计算属性和watch都能实现优先用计算属性~

032-列表排序

代码

<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 filPerons" :key="p.id">
     {{p.name}}-{{p.age}}-{{p.sex}}
     <input type="text">
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   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:{
     filPerons(){
      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
     }
    }
   }) 

  </script>
    </body>

这种方法没什么说的,一个计算属性直接实现~


推荐阅读

《鬼武者：梦想的黎明》PC 高清贴图演示下载 PCSX2 1.7｜4K60fps 《鬼武者：梦想的黎明》PC 高清贴图演示下载 PCSX2 1.7｜4K60fps
分布式架构之服务注册中心 分布式架构之服务注册中心

相关文章