文章目录

• 0.vue-cli和vue之间的复杂关系
• 1.v-for 和 v-if为什么不能放在一起使用
• 2.v-for为什么要添加key
• 3.v-show和v-if的区别
• 4.vue常用指令和方法
• 5.vue的生命周期
• 6.`$route`和`$router`的区别
• 7.vue中computed和watch以及methods的区别
• 8.vue中ref中的作用
• 9.watch如何对对象实现深度监听
• 10.vue中常用的修饰符
• 11.vue过滤器
• 12puted计算属性的特性和应用
• 13.vue中哪些数组方法可以直接对数组修改实现视图更新
• • 添加 删除 清空 翻转
• 14.vue自定义指令
• • vue2 全局自定义指令
  • vue3 全局自定义指令
  • vue3局部自定义指令
  • 自定义指令钩子函数的参数
  • 自定义指令参数
• 15.vue中什么是$nextTick
• 16.vue中父子组件通信
• • 父传子 ：props
  • 子传父 ：自定义事件
• 17.vue2父子组件间的访问方式 $children、 $refs、 $parent
• • $children 访问子组件的数据
  • $refs 获取子组件的对象
  • $parent获取父组件的对象
• 18.v-model的实现原理
• 19.vue父子组件跨级的通信 proivde、inject
• 20.组件中的data为什么必须是一个函数
• 21.vue2和vue3响应式数据的理解
• 22.vue2中如何检测数组变化
• 23.vue3 toRef函数和toRefs函数
• 24. reactive函数和ref

0.vue-cli和vue之间的复杂关系

(1) vue-cli3之前，也就是vue-cli2只能利用vue init webpack app命令初始化vue2.x的项目，
(2) vue-cli3~vue-cli4.5之间时,可以利用vue create app初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli脚手架版本4.5以上对应的才是vue3
(3)vue-cli4.5以上时，可以利用vue create app初始化vue2.x或者也vue3.x的项目，两者都可以在初始化时，自行选择

1.v-for 和 v-if为什么不能放在一起使用

v-for的优先级高于v-if 将两者放在一起，会执行v-for循环列表，v-if去判断每一项会造成性能浪费。
应该使用computed计算属性。

2.v-for为什么要添加key

能根据id选择选择框

key的作用能快速查找到节点，提升渲染性能，高效地更新虚拟dom

3.v-show和v-if的区别

v-show是控制 style = "display:none"属性

v-if是控制dom元素的添加和销毁

v-if用在一次性改变，修改元素比较少的时候，更高的切换消耗。
v-show用在频繁切换状态的时候，更高的初始渲染消耗。

4.vue常用指令和方法

5.vue的生命周期

6.$route和$router的区别

vue中的$route和$router的区别

• $router：全局路由对象，包含很多的属性和对象，包含所有的路由，任何页面都可以调用push(跳转页面)，replace(替换页面)，go(页面的前)进或者后退。

• $route：局部路由对象(当前激活的路由信息对象)，可以获取当前路由的信息(path,name,params,query)

7.vue中computed和watch以及methods的区别

vue中computed watch、 methods的区别

• computed：计算属性，基于它们的响应式依赖进行缓存，只有在相关的依赖发生改变时才会重新计算，对于复杂逻辑适用
• watch：侦听器，用于观察和监听页面上的vue实例的变化，监听新值和旧值，数据变化的同时进行异步操作，
• methods：单纯给Vue定义方法，只要重新发生渲染，methods调用总会被执行。

8.vue中ref中的作用

1、获取页面的dom对象
2、获取子组件的对象

9.watch如何对对象实现深度监听

10.vue中常用的修饰符

11.vue过滤器

2.0过滤器

3.0 使用computed代替过滤器

12puted计算属性的特性和应用

computed计算属性特性：是基于他们的依赖进行缓存，只要在相关的依赖发生改变的时候才会重新求值
应用：基于template里面的{{}}计算，处理props的传值

13.vue中哪些数组方法可以直接对数组修改实现视图更新

添加 删除 清空 翻转

vue中 利用索引设置数组的元素 直接修改数组长度 都不可以触发视图更新
push pop splice reverse shift unshift sort

14.vue自定义指令

vue2 全局自定义指令

Vue.directive('focus',{
 inserted:(el)=>{
  el.focus()
 }
})

vue3 全局自定义指令

//全局自定义指令
app.directive('focus',{
 mounted(el){
  el.focus()
 }
})

//组件使用
<input type="text" v-focus />

vue3局部自定义指令

自定义指令钩子函数的参数

<template>
 <div>
  <div v-fixed >定位</div>
 </div>
</template>

<script>
//自定义指令动态参数
const autoFocus = {
 fixed:{
  beforeMount(el,binding){
   console.log('el',el)
   console.log('binding',binding)
  }
 }
}
export default {
 directives:autoFocus,
 setup(){
 }
}
</script>

自定义指令参数

自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。

<template>
 <div>
  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">定位</div>
 </div>
</template>

<script>
//自定义指令动态参数
const autoFocus = {
 fixed:{
  beforeMount(el,binding){
   el.style.position = "fixed"
   el.style.left = binding.value.left+'px'
   el.style.top = binding.value.top + 'px'
  }
 }
}
export default {
 directives:autoFocus,
 setup(){
  const posData = {
   left:20,
   top:200
  }
  return {
   posData,
  }
 }
}
</script>

15.vue中什么是$nextTick

将回调函数延迟在下一次dom更新数据之后调用。
vue是异步渲染的框架，数据更新之后，dom不会立刻渲染。
$nextTick会在dom渲染之后触发，用来获取最新的dom节点。

使用nextTick中的回调函数在下一次DOM更新循环结束之后执行回调，用于获取更新后的DOM
vue中的数据更新是异步的，使用nextTick方法可以保证用户定义的逻辑在更新之后执行。

• 使用场景：
  1、在生命周期函数created中进行dom操作，一定放到nextTick中执行
  2、在数据变化后要执行的某个操作，而这个操作需要使用随数据变化的dom结构，则需要放到nextTick中

16.vue中父子组件通信

父传子 ：props

prop 在组件上注册一些自定义的属性 向子组件传递数据

子传父 ：自定义事件

17.vue2父子组件间的访问方式 $children、 $refs、 $parent

$children 访问子组件的数据

通过 $children访问子组件的数据，this.$children是一个数组类型，包含所有的子组件对象(开发中比较少用)

在 3.x 中，$children property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 $refs。

$refs 获取子组件的对象

使用ref和$refs一起使用 访问子组件的数据

$parent获取父组件的对象

18.v-model的实现原理

19.vue父子组件跨级的通信 proivde、inject

比如需要达到（爷爷-孙子）组件之间的通信 不经过父级

此处更改数据，不是响应式的，不会同步到两边。
响应式需要设置data中的数据。

20.组件中的data为什么必须是一个函数

data里是一个局部作用域，函数返回值会返回一个新的对象，组件之间不会互相影响。
每一次复用组件，都是返回一个新的data。
如果不使用data，则会造成所有的组件实例共用一个data，造成数据污染。

21.vue2和vue3响应式数据的理解

响应式:就是数据改变，对应的视图也会改变

• vue2:是通过Object.defineProperty()，如果是多层次就要递归
• vue3:采用proxy,如果是多层次数据，用户不使用，就不会递归

22.vue2中如何检测数组变化

我们都知道在Vue2中，对响应式处理利用的是 Object.defineProperty 对数据进行拦截。如果数据是数组，我们还是用defineProperty的方法进行拦截的话，需要对数组每一层每一位都进行依赖收集和更新时的notify，这样消耗的性能将指数倍增加，因为我们无法预估一个数组有多少层有多少位。

考虑性能原因，没有用 defineProperty 对数组的每一项进行拦截，而是选择对下面7个数组方法进行重写：

push
shift
pop
splice
unshift
sort
reverse

为什么是上面7个方法？因为我们要监控的是原数组的数据变化，使用上面7个方法对数组进行操作，会改变原数组，而其他方法并不会改变原数组。
vue2中没有使用defineProperty对这个数组的每一项进行拦截，而是选择重写数组。
数组中如果是对象的数据类型也继续递归处理。
数组的索引和长度变化是无法监控的。

vue2缺陷
无法监测数组的新增
无法监测用索引改变数组的操作

23.vue3 toRef函数和toRefs函数

我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？
事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。

import {ref} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= ref(obj.name);
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

上述代码，当change执行的时候，响应式数据发生改变，而原始数据obj并不会改变。
原因在于，ref的本质是拷贝，与原始数据没有引用关系

需要注意ref(obj.name)相当于ref(‘alice’)相当于reactive({value:‘alice’})
所以在修改数据时，是修改newObj.value=xxx

而如果使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。但是需要注意，如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。
所以，toRef的本质是引用，与原始数据有关联

小结：
ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

所以如果想让响应式数据和以前的数据关联起来，并且想在更新响应式数据的时候不更新UI，那么就使用toRef

有的时候，我们希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
例如

import {toRefs} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRefs(obj);
    function change(){
      newObj.name.value = 'Tom';
      newObj.age.value = 18;
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

24. reactive函数和ref

作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）