Vue3 与 Vue2对比

2023-12-01 本文已影响0人林思念

1、vue2.x的响应式

实现原理：

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法实现拦截（对数组变更方法进行了包裹）
*利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。

// Object.defineProperty
// 这个方法就是在一个对象上定义一个新的属性，或者改变一个对象现有的属性，并且返回这个对象。里面有两个字段 set,get。顾名思义，set都是取设置属性的值，而get就是获取属性的值。
// 在对象中添加一个属性与存取描述符的示例
let bValue
let o = {}
Object.defineProperty(o,'b',{
  get: function(){
    console.log('监听获取b')
    return bValue
  }
  set: function(newValue){
    console.log('监听设置b')
    bValue = newValue
  },
  enumerble: true,
  configurable: true
})

// 什么是观察者模式？它分为注册环节跟发布环节。
//比如我去买芝士蛋糕，但是店家还没有做出来。这时候我又不想在店外面傻傻等，我就需要隔一段时间来回来问问蛋糕做好没，对于我来说是很麻烦的事情，说不定我就懒得买了。
//店家肯定想要做生意，不想流失我这个吃货客户。于是，在蛋糕没有做好的这段时间，有客户来，他们就让客户把自己的电话留下，这就是观察者模式中的注册环节。然后蛋糕做好之后，一次性通知所有记录了的客户，这就是观察者的发布环节。
//简单实现一个观察者模式的类
class Observer{
  constructor (dep|[]){
    this.dep = []
  }
  register(fn){
    this.dep.push(fn)
  }

  notify() {
    this.dep.forEach(item=>item())
  }
}
const wantCake = new Oberver();
// 每来一个顾客就注册一个想执行的函数
wantCake.register(() => {console.log("call daisy")})
wantCake.register(() => {console.log("call anny")})
wantCake.register(() => {console.log("call sunny")})

// 最后蛋糕做好之后，通知所有的客户
wantCake.notify()

总结：

1、第一步：组件初始化的时候，先给每一个Data属性都注册getter，setter，也就是reactive化。然后再new 一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，将当前的Watcher函数注册进sub里。

2、第二步：当data属性发生改变之后，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。

存在问题：

新增属性、删除属性，界面不会更新。
直接通过下标修改数组，界面不会更新。

import Vue from 'vue'
export default{
  data() {
    return {
      person: {
        name: '张三',
        age: 18,
        hobby: ['学习', '吃饭']
      }
    }
  },
  methods: {
    addSex() {
      // 新增属性
      // console.log(this.person.sex)
      //this.person.sex = '女' // 直接增加界面不会更新
      // console.log(this.person.sex)
      // 以下两种方式均可以解决界面不更新问题
      this.$set(this.person, 'sex', '女')
      Vue.set(this.person, 'sex', '女')
    },
    deleteName() {
      // 删除属性
      // console.log(this.person.sex)
      // delete this.person.name //删除界面不会更新
      // console.log(this.person.sex)
      this.$delete(this.person,'name')
      Vue.delete(this.person,'name')
    },
    updateHobby() {
      // 修改数组
      //this.person.hobby[0] = '溜达'
      this.$set(this.person.hobby,0,'溜达')
      Vue.set(this.person.hobby,0,'溜达')
      this.person.hobby.splice(0,1,'溜达')
    }
  }
}

2、vue3的响应式

通过Proxy（代理）：拦截对象中任意属性的变化。包括：属性值的读写、属性的添加、属性的删除等
通过Reflect（反射）：对源对象的属性进行操作。

new Proxy(person, {
    get(target,propName) {
      console.log(`读取了p上的${propName}属性`);
      return Reflect.get(target, propName)
    },
    set(target, propName,value) {
      console.log(`修改了p上的${propName}属性`);
      Reflect.set(target, propName, value)
    },
    deleteProperty(target, propName){
      console.log(`删除了p上的${propName}属性`);
      return Reflect.deleteProperty(target, propName)
    }
  })
 proxy.name = 'tom'

3、reactive 对比 ref

从定义角度对比：

ref用来定义：基本类型数据
reactive用来定义：对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

从原理角度对比：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect(反射)操作源对象内部的数据。

从使用角度对比：

ref定义的数据：操作数据需要.value, 读取数据时模板中直接读取，不需要.value
reactive定义的数据：操作数据与读取数据：不需要.value

4、setup注意点

setup执行时机：

在beforeCreate执行之前执行一次，this是undefined

export default {
beforeCreate () {
    console.log('---beforeCreate---')
  },
  setup (props, context) {
    console.log('--setup--', this)

    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)
    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)
    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)
    // 暴露公共 property (函数)
    console.log(context.expose)

    return {}
  }
}
//--setup-- undefined
//---beforeCreate---

setup的参数:

props：值为对象，包含：组件外部传递过，且组件内部声明接收了的属性。
context：上下文对象
- attrs：值为对象，包含：组件外部传递过来，但是没有在props配置中声明的属性，相当于this.$attrs。
- slots：收到的插槽内容，相当于this.$slots
- emit：分发自定义事件的函数，相当于this.$emit。

5、计算属性与监视

computed函数

与Vue2中的computed配置功能一致
vue3写法：

import { computed } from 'vue'
  // 计算属性简写（未考虑计算属性被修改的情况）
  person.fullName = computed(() => {
    return person.firstName + '-' + person.lastName
  })

  // 计算属性完整写法（考虑读写）
  person.fullName = computed({
    get () {
      return person.firstName + '-' + person.lastName
    },
    set (value) {
      const name = value.split('-')
      person.firstName = name[0]
      person.lastName = name[1]
    }
  })

watch函数

与Vue2中watch配置功能一致
两个小坑：
- 监视reactive定义的响应式数据时候： oldValue无法正确获取、强制开启了深度监视（deep配置失效）
- 监视reactive定义的响应式数据中某个属性时： deep配置有效

//vue2写法
  //简写
  sum (newValue, oldValue) {
    console.log('sum值变化了', newValue, oldValue)
  }
  // 完整版
  sum: {
    immediate: true, // 立即监听
    deep: true, // 深度
    handler (newValue, oldValue) {
      console.log('sum值变化了', newValue, oldValue)
    }
  }

  // vue3写法
  // 数据
  const sum = ref(0)
  const msg = ref('你好啊')
  const person = reactive({
    name: '小明',
    age: 18,
    job: {
      j1: {
        salary: 20
      }
    }
  })
  // 情况一：监视ref所定义的一个响应式数据
  watch(sum, (newValue, oldVlue) => {
    console.log('数值变了', newValue, oldVlue)
  }, { immediate: true})

  // 情况二：监视ref所定义的多个响应式数据
  watch([sum, msg], (newValue, oldVlue) => {
    console.log('sum或msg数值变了', newValue, oldVlue)
  }, { immediate: true })

  // 情况三：监视reactive所定义的一个响应式数据的全部属性
  // 注意：1.此处无法正确获取oldValue
  // 注意：2.强制开启了深度监视(deep配置无效)
  watch(person, (newValue, oldValue) => {
    console.log('person变化了', newValue, oldValue)
  }, { deep: false })// 此处的deep配置无效 

  // 情况四：监视reactive所以定义的一个响应式数据的某个属性
  watch(() => person.age, (newValue, oldValue) => {
    console.log('person的age变化了', newValue, oldValue)
  })

  // 情况五：监视reactive所以定义的一个响应式数据的某些属性
  watch([() => person.age, () => person.name], (newValue, oldValue) => {
    console.log('person的age/name变化了', newValue, oldValue)
  })

  // 特殊情况：监视的是reactive中所定义的对象中的某个属性（依然是个对象
  watch(() => person.job, (newValue, oldValue) => {
    console.log('person的job变化了', newValue, oldValue)
  }, { deep: true })// 此处由于监视的是reactive中所定义的对象中的某个属性（依然是个对象），所以deep有效

watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect的套路是：不用监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect有点像computed：
- 但computed注重计算出来的值（回调函数的返回值），所以必须写返回值
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect (() =>{
  const x1 = sum.value
  const x2 = person.job.j1.salary
  console.log('watchEffect的回调执行了')
})

6、生命周期

Vue3.0中可以继续使用vue2中的生命周期钩子，但是有两个被更名

beforeDestroy改名为BeforeUnmount
destroyed 改名为 unmounted

Vue3中也提供了composition API形式的声明周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate => setup()
created ======> setup()
beforeMount ==> onBeforeMount()
mounted ======> onMounted()
beforeUpdate => onBeforeUpdate()
updated ======> onUpdated()
beforeDestroy=> onBeforeUnmount()
destroyed ====> onUnmounted()

7、自定义hook函数

什么是hook？ ———— 本质是一个函数，把setup函数中使用的Composition API进行封装
类似于vue2.x 中的mixin
自定义hook的优势：复用代码，让setup中的逻辑更清楚

8、toRef和toRefs

作用：创建一个ref对象，其value指向另一个对象中的某个属性
语法：const name = toRef(person, 'name')
应用：要将响应式对象中的某个属性单独提供给外部使用时候
扩展：toRefs与toRef功能一致，但是可以批量创建多个ref对象，语法：...toRefs(person)

props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性，上面说到的toRefs可以很好的解决这个问题。

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)
  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

9、其他Composition API

1、shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef ：只处理基本类型数据的响应式，不进行对象的响应式处理
什么时候使用?
- 如果有一个对象数据，结构比较深，但是变化时只是外层属性变化 ===> shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 ===> shallowRef

// name,age都是响应式，job无效
  const person = shallowReactive({// 只考虑第一层数据的响应式
      name: '小明',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    /* <button @click="x.y++">点我x.y++</button>
    <button @click="x={y:888}">点我替换x</button> */
    const x = shallowRef({
      y: 0
    })
    // xy++不生效， 替换x生效

2、readonly和shallowReadonly

readonly: 让一个响应式数据变成只读的（深只读）。对象类型内部所有数据也不可更改
shallowReadonly: 让一个响应式数据变成只读的（浅只读）。只有外层数据不可更改，深层数据可以
应用场景：不希望数据被修改时

const sum = ref(0)

  const person = reactive({
    name: '小明',
    age: 18,
    job: {
      j1: {
        salary: 20
      }
    }
  })
  person = readonly(person) // person所有数据可以更改
  person = shallowReadonly(person) // job内部数据可以更改
  sum = readonly(sum) // sum不可更改

3、toRaw 和 markRaw

toRaw：

作用：将一个由reactive生成的响应式对象转化为普通对象(ref生成不可用)
使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

markRaw

作用：标记一个对象，使其永远不会再成为响应式对象。
应用场景：
- 1、有些值不应被设置为响应式的，例如复杂的第三方库等。
- 2、当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4、customRef

作用：传建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。
实现防抖效果：

<template>
  <div>
    <input type="text" v-model="keyWord"/>
    <h2>{{keyWord}}</h2>
  </div>
</template>
<script>
import { ref, customRef } from 'vue'

export default {
  setup () {
    // 自定义一个ref——名为：myRef
    function myRef (value, delay) {
      let timer = null
      return customRef((track, trigger) => {
        return {
          get () {
            console.log('有人从myRef容器中读取数据了')
            track() // 通知vue追踪value变化（提前和get商量一下，让他认为这个value是有用的）
            return value
          },
          set (newValue) {
            console.log('有人从myRef容器中数据改为了' + newValue)
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue
              trigger() // 通知vue去重新解析模板
            }, delay)
          }
        }
      })
    }
    // const keyWord = ref('hello')//使用Vue提供的ref
    const keyWord = myRef('hello', 1000) // 使用自定义的ref

    return {
      keyWord
    }
  }
}
</script>

5、provide 与 inject

作用：实现祖与后代组件间的通信
套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据
具体写法：
- 祖组件中：

setup() {
  ......
  let car =reactive({name: '奔驰', price:'40万'})
  provide('car', car)
}

孙组件中：

setup(props, context) {
  ......
  const car = inject('car')
  return car 
  ......
}

6、响应式数据的判断

isRef: 检查一个值是否为ref对象
isReactive: 检查一个对象是否由reactive创建的响应式代理
isReadonly: 检查一个对象是否是由readonly创建的只读代理
isProxy: 检查一个对象是否由reactive或者readonly方法创建的代理

10、Composition API的优势

1、Options API存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，要分别再data，methods, computed中修改

2、Composition API的优势

我们可以更加有家的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起

11、新的组件

1.Fragment

在Vue2中：组件必须有一个根标签
在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
好处：减少标签层级，减少内存占用

2.Teleport

什么是Teleport？ ———— Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

<!-- <teleport to="body">  -->
  <teleport to="#app">
    <div v-if="isShow" class="dialog">
      <h3>我是一个弹窗</h3>
      <button @click="isShow=false">关闭弹窗</button>
    </div>
  </teleport>

3.Suspense

等待异步组件时渲染一些额外的内容，让应用有更好的用户体验
使用步骤：
- 异步引入组件

import {defineAsyncComponent} from 'vue'
  const Child = defineAsyncComponent(()=>{import('./components/Child.vue)})

使用Suspense包裹组件，并配置好default和fallback

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>加载中....</h3>
      </template>
    </Suspense>
  </div>
</template>

12、全局API的转移

Vue2.x有许多全局API和配置

例如：注册全局组件、注册全局指令等。

// 注册全局组件
Vue.component('myButton', {
  data: ()=>({
    count: 0
  })
  template: '<button @click="count++">Clicked {{ count }}</button>'
}),

// 注册全局指令
Vue.directive('focus',{
  inserted: el => el.focus()
})

Vue3.0中对这些API做出了调整：

将全局的API，即：http://Vue.xxx 调整到了应用实例（app）上

Vue.config.xxx  -->  app.config.xxx
Vue.config.productionTip  -->  移除
Vue.component  -->  app.component
Vue.directive  -->  app.directive
Vue.mixin  -->  app.minxin
Vue.use  -->  app.use
Vue.prototype  -->  app.config.globalProperties

父组件中绑定事件

<my-component>
  v-on:close = 'handleComponentEvent'
  v-on:click = 'handleNativeClickEvent'
</my-component>

子组件声明自定义事件

export default {
  emits: ['close']
}

移除过滤器(filter)