Vue知识点整理（待更新）

v-model:checkbox：

• 单个勾选框：

  • v-model即为布尔值。

  • 此时input的value并不影响v-model的值。

• 多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。

  代码：

  同意协议
  是否选中：{{checked}} 
  篮球足球台球
  您选中的爱好：{{hobbies}}
  
  

v-model:select：和checkbox一样，select也分单选和多选两种情况。

• 单选：只能选中一个值。

  • v-model绑定的是一个值。

  • 当我们选中option中的一个时，会将它对应的value赋值到mySelect中

  代码：

  
  苹果橘子香蕉
  
  您最喜欢的水果：{{mySelect}} 
  ...
  

• 多选：可以选中多个值。

  • v-model绑定的是一个数组。

  • 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

  代码：

  苹果橘子香蕉
  
  您最喜欢的水果：{{mySelect}} 
  

【问】条件渲染指令如何使用？它们之间有什么区别（v-if动态添加DOM元素，有更高的切换开销；v-show动态添加样式，有更高的初始渲染开销）

Note：

• 条件渲染指令包括：v-if和v-show

• 实现原理不同：

  • v-if指令会动态地创建或移除DOM元素，从而控制元素在页面上的显示与隐藏；

  • v-show指令会动态为元素添加或移除style="display:none;"样式，从而控制元素的显示与隐藏；

• 性能消耗不同：

  v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此：

  • 如果需要非常频繁地切换，则使用v-show较好
  • 如果在运行时条件很少改变，则使用v-if 较好

• 两者使用的区别：

  • v-if、v-else、v-else-if条件性的渲染某元素，判定为true时渲染，否则不渲染；

  • v-show条件不满足令其display为none。

  不及格
  中等
  =90">优秀
  display:block显示
  display:none隐藏
  

【问】列表渲染指令如何使用？（v-for常配合checkbox、options、li标签使用）

Note：

• vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，其中：

  • items是待循环的数组
  • item是被循环的每一项

  代码：

   姓名是:{{item.name}} 
  
  

• v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index) in items，示例代码如下（item，index变量名可随便取）：

   第{{index + 1}}个同学，姓名是:{{item.name}} 
  
  

• 【问】如何提高列表渲染指令的性能？（v-for在vue2.2+之后必须使用:key来提高渲染效率），参考列表渲染 — Vue.js

  Note：

  • 当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

  • 为了给vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的key属性：

     姓名是:{{item.name}} 
    
    

【问】keep-alive的基本使用？

Note：

• keep-alive是什么

  • 当组件被缓存时，会自动触发组件的deactivated生命周期函数。

  • 当组件被激活时，会自动触发组件的activated生命周期函数。

  • 当组件第一次被创建，会执行created生命周期函数，也会执行activated生命周期函数。之后组件再被激活，只会触发activated而不会触发created。

• keep-alive的基本使用以及基本属性：

  <组件名>
  
  

  • include包含的组件(可以为字符串，数组，以及正则表达式，只有名称匹配的组件会被缓存)。

    // 只缓存组件name为a和b的组件
     
    
    

  • exclude排除的组件(可以为字符串，数组，以及正则表达式，任何匹配的组件都不会被缓存)。

    // 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
     
    // 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
     
    
    

  • max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)；

    // 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
     
    
    

【问】侦听器watch的作用及如何使用？（侦听器主要用于监听data中存储的数据对象是否发生变化；设置deep得到嵌套侦听器；设置immediate得到即时回调侦听器），参考侦听器 | Vue.js，《Vue 入门教程》Vue 侦听器

Note：

• watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。有两种创建方式：

  • 方法格式的侦听器：watch : { key : function(new,old){} }；

  • 对象格式的侦听器：watch : {key : {handler(new,old){}, deep, immediate }，支持创建嵌套侦听器和回调侦听器。

• 侦听器简单例子：

  • 侦听器 watch 实际是 vue 实例上的一个对象属性。当我们需要对 vue 实例上某个属性进行侦听时，我们以需要被侦听的属性名作为 watch 对象的键，以一个函数 function 作为该键的值。

  • 函数 function 接收两个参数：侦听数据变化之后的值newValue；侦听数据变化之前的值oldValue：

  var vm = new Vue({el: '#app',data() {return {count: 0}},watch: {count: function(newVal, oldVal) {// 具体处理逻辑},}
  })
  

• 深层侦听器：watch 默认是浅层的，仅在被赋新值时，才会触发回调函数。如果想侦听所有嵌套的变更需要将deep选项设置为true，得到使用深层侦听器；

  export default {watch: {question : {handler(newValue, oldValue) {// 注意：在嵌套的变更中，// 只要没有替换对象本身，// 那么这里的 `newValue` 和 `oldValue` 相同},deep: true}}
  }
  

• 即时回调的侦听器：watch 默认是懒执行的，仅当数据源变化时，才会执行回调。但在某些场景中，举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据，即在创建侦听器时，立即执行一遍回调。这里可以为侦听器设置 immediate: rue ，强制回调函数立即执行：

  export default {// ...watch: {question: {handler(newQuestion) {// 在组件实例创建时会立即调用},// 强制立即执行回调immediate: true}}// ...
  }
  

• 侦听器综合案例（对字典、整型进行监听）：参考Vue基础之侦听器详解

  const app = createApp({data() {return {a: 1,b: 2,c: {d: 4},e: 5,f: 6}},watch: {// 侦听顶级 propertya(val, oldVal) {console.log(`new: ${val}, old: ${oldVal}`)},// 字符串方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深c: {handler(val, oldVal) {console.log('c changed')},deep: true},// 侦听单个嵌套 property'c.d': function (val, oldVal) {// do something},// 该回调将会在侦听开始之后被立即调用e: {handler(val, oldVal) {console.log('e changed')},immediate: true},// 你可以传入回调数组，它们会被逐一调用f: ['handle1',function handle2(val, oldVal) {console.log('handle2 triggered')},{handler: function handle3(val, oldVal) {console.log('handle3 triggered')}/* ... */}]},methods: {someMethod() {console.log('b changed')},handle1() {console.log('handle 1 triggered')}}
  })
  const vm = app.mount('#app')
  vm.a = 3 // => new: 3, old: 1
  

【问】计算属性computed是什么？（如果相关数据发生改变，computed会重新计算并返回结果，有点类似watch侦听的意思，应该也是采用观察者设计模式；默认走缓存），参考计算属性

Note：

• 关于computed计算属性的理解：

  1、computed 和 data同级，计算属性写在computed中；

  2、写起来像方法，用起来像属性；

  3、计算属性虽然称为属性，但其本质是一个函数；

  4、虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()；

  5、一定要有返回值；

  6、可以使用data中的已知值；

  7、只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化；

  8、计算属性名不能和data中的数据重名（因为要使用data中的数据）。

• 使用例子：

  export default {data(){return{msg : ""}},computed: {reversedMsg(){return this.msg.split('').reverse().join('')}}// ...
  }
  

【问】computed与watch的区别和使用场景？，参考Computed 和 Watch 的区别

Note：

• computed计算属性的作用：

  • 1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。

  • 2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。

  • 3）不支持异步，如果有异步操作，无法监听数据的变化。

  • 4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。

  • 5）computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。

• watch侦听器的作用：

  • 1）它不支持缓存，数据变化时，它就会触发相应的操作。

  • 2）支持异步监听。

  • 3）接受两个参数，第一个是最新的值，第二个是变化之前的值。

  • 4）监听data或者props传来的数据，发生变化时会触发相应操作。有两个参数：

    • immediate：立即触发回调函数。

    • deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

• computed与watch的使用场景：

  • computed：是多对一，多个数据影响一个。当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算（缓存多个值）。

  • watch：是一对多，一个数据发生变化，执行相应操作会影响多个数据。当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。