vue3 api 理解和变更

使用api都需要在vue中按需引入

1. ref

• ref是响应式数据，可以给定初始值，但是会通过.value来访问，template中可以直接 ref 指向

2. 生命周期

• setup替代了beforeCreate和created两个生命周期函数，理解成它的执行时间在替代的两个生命周期函数之间
• 提供了两个参数props和context（上下文）,props是响应式的，可以通过watch和watchEffect进行观测和响应，解构会失去响应式

3. reactive

• vue3提供的响应式函数，可以理解成vue 2.x类似的功能，但是是用proxy写的，所以解决了vue 2.x的一些问题（$set、数组只有 6 个方法重写等）

建议：

• 基本类型值（String 、Nmuber 、Boolean 等）或单值对象（类似像 {count: 3} 这样只有一个属性值的对象）使用 ref

• 引用类型值（Object 、Array）使用 reactive

4. toRef

• toRef是将某个对象中的某个值转化为响应式数据，其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名
• ref是对原数据的一个拷贝，不会影响到原始值，同时响应式数据对象值改变后会同步更新视图
• toRef是对原数据的一个引用，会影响到原始值，但是响应式数据对象值改变后会不会更新视图

ref 是对传入数据的拷贝；toRef 是对传入数据的引用

ref 的值改变会更新视图；toRef 的值改变不会更新视图

5. toRefs

• 将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数，即 obj 对象

6. shallowReactive

• reactive的浅层api，只会对第一层进行响应式包装，性能优化

7. shallowRef

• shallowRef 监听 .value 的值的变化来更新视图的

8. toRaw

• 用于获取ref或reactive对象的原始数据，toRaw接收一个参数，即ref对象或 reactive对象
• 当想修改数据，但不想让视图更新时，可以选择直接修改原始数据上的值，因此需要先获取到原始数据，可以使用toRaw方法
• 当 toRaw方法接收的参数是ref对象时，需要加上.value才能获取到原始数据对象

9. markRaw

• 将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据
• 个人理解：就是加一个不能变成响应式的状态，不管你怎么使用响应式函数（ref || reactive），都不会变成响应式

10 watch && watchEffect

• watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作的

• watch：watch( source, cb, [options] )

  • source：可以是表达式或函数，用于指定监听的依赖对象
  • cb：依赖对象变化后执行的回调函数
  • options：可选参数，可以配置的属性有 immediate（立即触发回调函数）、deep（深度监听）

• watch 监听 ref

  const state = ref(0);
  
  watch(state, (newValue, oldValue) => {
    console.log(`原值为${oldValue}`);
    console.log(`新值为${newValue}`);
    /* 1秒后打印结果：
      原值为0
      新值为1
    */
  });
  
  // 1秒后将state值+1
  setTimeout(() => {
    state.value++;
  }, 1000);
  

• watch 监听 reactive

   setup() {
        const state = reactive({count: 0})
  
        watch(() => state.count, (newValue, oldValue) => {
          console.log(`原值为${oldValue}`)
          console.log(`新值为${newValue}`)
          /* 1秒后打印结果：
            原值为0
            新值为1
          */
        })
  
        // 1秒后将state.count的值+1
        setTimeout(() => {
          state.count ++
        }, 1000)
    }
  
  

• watch 监听多个值

  setup() {
       const state = reactive({ count: 0, name: 'zs' })
  
        watch(
           [() => state.count, () => state.name],
           ([newCount, newName], [oldvCount, oldvName]) => {
             console.log(oldvCount) // 旧的 count 值
             console.log(newCount) // 新的 count 值
             console.log(oldName) // 旧的 name 值
             console.log(newvName) // 新的 name 值
           }
         )
  
         setTimeout(() => {
           state.count ++
           state.name = 'ls'
         }, 1000)
   }
  

• 因为 watch 方法的第一个参数我们已经指定了监听的对象，因此当组件初始化时，不会执行第二个参数中的回调函数，若我们想让其初始化时就先执行一遍，可以在第三个参数对象中设置 immediate: true

• watch 方法默认是渐层的监听我们指定的数据，例如如果监听的数据有多层嵌套，深层的数据变化不会触发监听的回调，若我们想要其对深层数据也进行监听，可以在第三个参数对象中设置 deep: true

watch 方法会返回一个 stop 方法，若想要停止监听，便可直接执行该 stop 函数

• watchEffect 和 watch 的区别
  • 不需要手动传入依赖
  • 每次初始化时会执行一次回调函数来自动获取依赖
  • 无法获取到原值，只能得到变化后的值

11. getCurrentInstance

• 获取到当前组件的实例，只能在setup和生命周期中使用
• ctx属性在开发环境和生产环境不一致，我看网上建议使用proxy,但是尤大好像不建议使用
• 我在ts中还没弄明白怎么用

12. useStore

• 获取vuex中的 store

变更

1. 移除filter，文档说明，建议使用computed或者methods（函数）实现
2. 移除$on、$off、$once,文档说明，建议使用第三方库mitt
3. v-model和.sync两个语法糖合并，.sync合并到v-model上,value->modelValue,input->update:modelValue
4. directive变更
5. v-if与v-for的优先级对比,2.x中v-for优先级高于v-if,所以是会报错，但在3.x中，v-if 总是优先于 v-for 生效,但是官方还是推荐不要一起使用，防止产生歧义，文档
6. v-bind合并行为，2.x总是静态属性覆盖动态绑定，3.x取决于声明顺序，后者覆盖前者，文档
7. v-for中的ref不再自动生成数组，具体使用请查看文档
8. 异步组件需要使用defineAsyncComponent函数包裹，详见文档
9. vue2中的template标签可以做无意义的标签，经常在不想添加多余dom的时候使用，但是vue3中只有在v-if的时候会和原来一样，不然会默认渲染template标签，并且display:none;,同时v-show不支持template,详见文档

vue-router

1. history选项
   • history:createWebHistory()
   • hash:createWebHashHistory()
   • abstract:createMemoryHistory()
2. base选项移至createWebHistory等方法中
3. 通配符*被移除，文档说明，可以参考path:'/:catchAll(.*)'
4. scrollBehavior返回值由{x,y}变成{top,left}
5. 现在keep-alive和transition必须用在router-view内部
6. router-link移除了一票属性，tag/event变更，可以使用custom属性（将不再默认渲染成a标签）和v-slot解构出来的路由属性自定义
7. mixins中路由守卫被忽略,可以关注这里
8. match方法被resolve替代
9. route的parent属性被移除

const parent = this.$route.matched[this.$route.matched.length-2]

10. pathToRegexpOptions被移除
    • pathToRegexpOptions => strict
    • caseSentive => sentive

 createRouter({
 	strict:boolean,
 	sensitive:boolean
 })  

11. 命名子路由如果path为空时不再追加/

[
	path:'/dash',
	children:[
		{path:"",component:Dash}
	]
]

以前生成url:/dash/
副作用：给设置了重定向redirect选项的子路由带来副作用

[
	path:'/dash',
	children:[
		{path:"",redirect: 'home'},
		{path:"home",component:Home},
	]
]

之前： /dash/home
现在：/home

参考链接

快速使用 Vue3 最新的 15 个常用 API
vue3中文文档