Vue

bridge 2022/9/1

# 1. vue 组件间传值 (opens new window)

父向子传值：props自定义属性

Child.vue

<template>
  <div class="hello">
    {{msg}} ———— {{date}}
     <button @click="show">获取子组件的值</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    date: {
      type: String,
      required: true 
    }
  },
  methods: {
    show(){
      this.$emit('getSonValue', '子向父传的值')
    }
  }
}
</script>

Parent.vue

<template>
  <div>
    <Child msg="Welcome to Your Vue.js App" date="2022"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

子向父传值：自定义事件（$emit）
EventBus
通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件
使用 ref
$parent 和 $root
$attrs 和 $listeners
provide 和 inject
vuex

# 2. 虚拟dom

概念
虚拟dom是对真实dom的抽象，用javaScript对象作为基础的树，用对象的属性来描述节点

作用

直接操作真实dom的代价很大，尤其是频繁操作时，而使用虚拟dom可以避免一些多余的渲染，从而提高页面的渲染效率
虚拟dom使跨平台更容易实现。同一套虚拟dom可以对接不同平台的渲染逻辑，实现一套代码，多平台使用

# 3. diff 算法

概念
diff算法是一种通过同层树节点进行比较的高效算法

特点

比较只会在同层级进行，不会跨层级比较
进行比较时从两端向中间进行

应用场景
常用于虚拟dom渲染成真实dom时，新旧虚拟dom树的比较

原理

引入4个指针，分别指向旧虚拟dom节点列表开头、结尾和新虚拟dom的开头、结尾。
按下列顺序进行比较：
（1）旧前与新前节点对比
（2）旧后与新后节点对比
（3）旧前与新后节点对比
（4）旧后与新前节点对比
如果有相同的，则将真实节点移到对应位置；如果没有相同的，遍历旧节点列表新前指针所指节点，找到则对应移动真实dom，否则真实dom插入新节点
重复上述步骤直至旧前大于旧后或新后小于新前
如果
（1）旧前大于旧后，且新节点列表仍没遍历完，则新增这些节点插入到对应位置
（2）新后小于新前，且旧节点列表没遍历完，则删除这些剩余的节点

# 4. vue 中 key 的作用

key是每个虚拟dom节点的唯一标识，当进行diff时，根据key可以更快、更准确地找到对应的节点

如果不用key，vue就无法获取每个节点的顺序来在对应位置进行插入或删除，而是会采用就地更新的方式，导致一些多余的dom操作

比如现在有个节点列表是[1,2,3]，要向头部插入一个新的节点，值为0；
若不使用key，vue会将原本的节点值改为0、1、2，再在尾部新增一个值为3的节点；
而使用key，vue则会直接创建一个值为0的节点，然后插入到1前面

# 5. vue 数据响应式的原理

概念
数据响应式即当数据改变时，视图也会相应改变。
原理
vue 中采用数据劫持和观察者模式的方式实现

Vue2 中：
vue2 中采用 Object.defineProperty 中进行数据劫持，通过为每个数据增加 getter 和 setter 来监听数据的变化。缺点：

监听对象时，需要遍历对象的属性
无法监听到对象新增的属性
无法监听数组的变化，vue2 中是通过重写数组方法来实现对数据的劫持

Vue3 中：
vue3 改用 Proxy 进行数据劫持

# 6. v-if 和 v-show

v-if 和 v-show 都能控制元素的显示，但 v-if 显示、隐藏元素是通过增加或删除 dom 元素，而 v-show 是通过为元素加上、移除 display：none 来实现显示或隐藏。
如果是切换频繁的情况，使用 v-show 较好，而如果运行时条件很少变化，则一般使用 v-if

# SPA

单页页面，即网页只会有一个主页面，而不会转移到另一个页面，通过动态加载不同的资源来显示不同界面。

# watch 和 computed 的区别

功能上：computed 是计算属性，watch是监听一个值的变化，然后执行对应的回调函数
缓存上：computed 函数所依赖的值没有发生改变，那么调用函数的时候会从缓存中读取；而watch监听到的值发生改变时都会执行回调函数
是否需要return：computed 必须要有return值，而watch可以没有
computed 默认第一次加载时就开始监听；watch 第一次默认不监听，必须设置 immediate:true 才会监听第一次加载时

HTML Vuex

Bridge 个人博客

Choose mode

Vue

Vue