Vue3 中有哪些值得深究的知识点？

时间：2021-11-24 15:52:17

Vue3 中有哪些值得深究的知识点？

众所周知，前端技术一直更新很快，这不 vue3 也问世这么久了，今天就来给大家分享下vue3中值得注意的知识点。

1、createApp

vue2 和 vue3 在创建实例时，有很大的区别，具体对比如下：

  1. //Vue 2 
  2. Vue.use({ 
  3.  router, 
  4.  store, 
  5.   render:h=>h(App) 
  6. }).$mount("#app") 
  7.  
  8. //Vue 3 
  9. createApp(App).use(router).use(store).mount("#app") 

vue2 创建实例，使用的是 new Vue() 对应的 router、store 都是其中一部分参数。

而 vue3 中，使用 createApp 创建应用实例，router、store 被当作插件通过链式调用。

在 vue2 中，创建多个实例的话，如果有 mixin、prototype 等时，容易造成实例污染。而 createApp 方法创建的是一个全新的实例，可以有效地避免这个问题。所以在vue3中，可以任意地创建多个实例。

2、setup

vue2 中选项式开发的，而 vue3 采用组合式开发，也可以向下兼容选项式开发。

setup 函数就是 vue3 中 Composition API 的入口，是处于生命周期钩子函数 beforeCreate 和 created 两个函数之间，所以 setup 中的属性和方法无法在外部使用。如果需要使用的话，必须 return 暴露出去。

对比一下 vue2 和 vue3 中 data 和 method 使用区别：

  1. // vue2 
  2. export default{ 
  3.  data(){ 
  4.   return{ 
  5.    name:"热爱前端的小姐姐" 
  6.   }, 
  7.   methods:{ 
  8.    print(){ 
  9.     console.log("打印") 
  10.    } 
  11.   } 
  12.  } 
  13. } 
  14.  
  15. // vue3 
  16. export default{ 
  17.  setup(){ 
  18.   const name="热爱前端的小姐姐" 
  19.   function print(){ 
  20.    console.log("打印") 
  21.   } 
  22.   return {  name , print } 
  23.  } 
  24. } 

vue2 中，this 是我们的常客，随处可见它的踪影。我们在 setup 中加入 this 的打印，试着查看下结果，发现运行结果是 undefined。

所以在 setup 内无法使用 this 以及挂载 this 相关的东西。

所以 setup 函数提供了两个参数：

  1. setup(props,context){ 
  2.  //props 是响应式数据，不能直接解构赋值 
  3.  //context 非响应式对象，可以直接解构使用 
  4.    
  5.  // Attribute (非响应式对象) 
  6.  console.log(context.attrs) 
  7.   
  8.  // 插槽 (非响应式对象) 
  9.  console.log(context.slots) 
  10.   
  11. // 触发事件 (方法) 
  12. console.log(context.emit) 
  13. } 

3、script setup 语法糖

简化上述 setup 组合式 API 的写法，属于 vue3 的新语法糖。

特点：

  1. 定义的属性和方法无需 return，可以直接使用。
  2. 自动注册组件，不再需要 components 内注册组件。

大大简化上述 setup() 的代码。

4、钩子函数

vue2 使用生命周期函数时，直接使用就好了。如：

  1. // vue2 
  2. export default{ 
  3.  beforeCreate(){ 
  4.  }, 
  5.  mounted(){ 
  6.    
  7.  } 
  8. } 

但是在 vue3 组合式 API 中，通过生命周期钩子前面加 on 来访问，使用之前必须引入。如：

  1. // vue3  
  2. <script setup> 
  3.  import { onMounted } from "vue" 
  4.  onMounted(()=>{ 
  5.   
  6.  }) 
  7. </script> 

由于 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以在 setup 内不需要这两个钩子函数，剩余的都是一样的。

官方提供生命周期钩子：

Vue3 中有哪些值得深究的知识点？

5、teleport 传送门

teleport 传送门可以把内部的元素绑定到任意父元素上，使用方式简单灵活。

使用方式：

  1. <teleport to="body"></teleport> 

to 属性是指定 teleport 中内容加入的 DOM 元素，可以是标签名、类名或 id 。

  1. //标签名  。上述实例就是加入body元素内，使用的是标签名。 
  2. <teleport to="body"></teleport> 
  3.  
  4. //类名。如：to=".className" 
  5. <teleport to=".className"></teleport> 
  6.  
  7. //id名 
  8. <teleport to="#idName"></teleport> 

优点：多个组件嵌套层次过多时，样式层级处理麻烦，使用 teleport 可以把元素剥离出来，设置样式方便，同时 vue 控制状态也方便。

6、mixin 混入

mixin 对象会把多个组件公用的选项提取出来，需要的组件内引入，管理方便。在 vue3 中 mixin 使用较少。

使用方式：

  1. <script> 
  2. const myMixin = { 
  3.  data(){ 
  4.   return {name:'热爱前端的小姐姐'} 
  5.  } 
  6. } 
  7. export default { 
  8.  mixins:[myMixin], 
  9.  data(){ 
  10.   return { 
  11.    qdr:"前端人" 
  12.   } 
  13.  } 
  14. } 
  15. </script> 

使用时，可以引入多个 mixin 对象。使用注意事项：

  1. mixin 对象与组件包含相同选项时，会自动合并。
  2. mixin 对象与组件相同选项内拥有相同属性时，就近原则，优先继承实例内的值。
  3. mixin 和组件包含相同的钩子函数时，会合并执行，优先执行 mixin 中的钩子函数。
  4. mixin 自定义属性与实例中冲突时，可以通过 optionMergeStrategies 定义优先级。

7、自定义指令

全局自定义指令：

vue2 的 directive 挂载到 Vue 对象上。

vue3 的 directive 挂载到 app 上，如：

  1. //Vue 2 
  2. Vue.directive('name',opt) 
  3.  
  4. //Vue 3 
  5. const app = createApp(App) 
  6. app.directive("name",options) 
  7. app.mount("#app") 

局部自定义指令：与 vue2 写法相同。

在 vue3 中自定义指令生命周期钩子函数有一部分改变，钩子函数分别为：

  • created
  • beforeMounted
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmounted
  • unmounted

8、ref、reactive

ref 作用是让基础类型数据具备响应式。

reactive 让引用数据类型具备响应式能力。

ref 和 reactive 包裹数据，使数据具备响应式，在使用之前需要先引入。

使用方法如：

  1. <script setup> 
  2.  import { ref , reactive } from "vue" 
  3.  let mood = ref("value") 
  4.  let me = reactive({ 
  5.   str:value, 
  6.  }) 
  7. </script> 

setup + ref + reactive 就可以实现 vue2 中 data 的响应式功能，所以 setup 能够替换掉 data 。

9、toRefs、toRef

toRefs 解构 props 传递的数据，由于父向子组件通过 props 传值是响应式的，使用 ES6 解构会消除响应特性，所以使用 toRefs 。

  1. <script setup> 
  2.  const props = defineProps({ 
  3.   selectNum:Number, 
  4.   allNum:Number, 
  5.  }) 
  6.  const { selectNum, allNum } = toRefs(props) 
  7. </script> 

toRef 也是解构数据，主要是对可选参数处理，运行时先检查 解构的数据中是否存在该属性，如果存在就继承，不存在则会创建一个属性，这样就不会报错了。

  1. const str = toRef( props, 'str' ) 

10、watch、watchEffect 新用法

watch 、watchEffect 都是侦听器。

watch 会监听某个基础类型数据或引用数据类型的某个具体属性。

vue3 使用 watch 之前，必须引入。

  1. //vue2 
  2. watch:{ 
  3.  mood(curVal,preVal){ 
  4.   console.log('cur',curVal);//最新值 
  5.   console.log('pre',preVal);//修改之前的值 
  6.  } 
  7. } 
  8.  
  9. //vue3 
  10. import { watch } from "vue" 
  11. watch( 
  12.  name , 
  13.  ( curVal , preVal )=>{ //业务处理  }, 
  14.  options 
  15. ) 

watchEffect 监听的是引用数据类型的所有属性，不需要指定是哪个具体的属性，一旦运行，就会立刻执行。

watchEffect 使用之前也必须引入。

  1. import { watchEffect } from "vue" 
  2. let obj = reactive({ name:'qq',sex:'女'}) 
  3. watchEffect(() => { 
  4.  console.log('name',obj.name); 
  5.  console.log('sex' , obj.sex); 
  6. }) 

watch 与 watchEffect 对比：

  1. watch 运行的时候不会立刻执行， watchEffect 立即执行。
  2. watch 更加具体，需要指定监听的谁，watchEffect 不要执行具体监听谁，回调函数内直接使用就可以，比较抽象。
  3. watch 回调内可以访问到修改之前的值，watchEffect 只能访问最新的值。
  4. watch 可通过配置实现 watchEffect 的前两个特性。

11、computed 新用法

computed 计算属性

选项式 API 中 vue2 和 vue3 使用相同。

组合式 API 中，使用之前需要引入。

  1. // 选项式 
  2. computed:{ 
  3.  sum(){ 
  4.   return this.num1+ this.num2 
  5.  } 
  6. } 
  7.  
  8. //组合式 
  9. import { ref, computed } from "vue" 
  10. export default{ 
  11.  setup(){ 
  12.   const num1 = ref(1) 
  13.   const num2 = ref(1) 
  14.   let sum = computed(()=>{ 
  15.    return num1.value + num2.value 
  16.   }) 
  17.  } 
  18. } 

或者，它可以使用一个带有 get 和 set 函数的对象来创建一个可写的对象。

  1. let mul = computed({ 
  2.  get:()=>{ 
  3.   return num1.value *10 
  4.  }, 
  5.  set:(value)=>{ 
  6.   return num1.value = value/10 
  7.  } 
  8. }) 

在vue3.2+内，computed 可接受一个带有 onTrack 和 onTrigger 选项的对象作为第二个参数：

  • onTrack 会在某个响应式 property 或 ref 作为依赖被追踪时调用。
  • onTrigger 会在侦听回调被某个依赖的修改触发时调用。

12、provide / inject

provide/inject 类似于消息的订阅和发布，provide 提供或发送数据或方法， inject 接收数据或方法。

优点：组件嵌套层级较多，父组件向子组件、多个孙组件传值时，传递数据需要一级一级向下传递，比较麻烦，使用 project 和 inject 很方便地解决了这个问题。

  1. //vue2 
  2. export default{ 
  3.  provide:{ 
  4.   info:"提供数据" 
  5.  } 
  6. } 
  7. //接收数据 
  8. export default{ 
  9.  inject:['info'], 
  10.  mounted(){ 
  11.     console.log("接收数据：", this.info) // 接收数据：提供数据 
  12.  } 
  13. }  
  14.  
  15. //vue3 
  16. <script setup> 
  17.  import { provide } from "vue" 
  18.  provide( 'info', "值" ) 
  19. </script> 
  20. //接收数据 
  21. <script setup> 
  22.  import { inject } from "vue" 
  23.  const info = inject( 'info', "设置默认值" ) 
  24. </script> 

13、readonly

readonly 只读函数，使用之后该数据只能使用，不能修改，修改时会有警告。

父子组件之间传值时，如果传递的是响应式数据，子组件修改的时候，父组件的也会更新，这样就容易造成状态混乱，不符合 vue 的单项数据流。

如果使用 readonly ，保证数据在其他组件内只能使用，并不能修改，规避混乱。

14、获取真实DOM

vue2 使用 $ref 获取真实DOM。

vue3 使用 ref 获取真实DOM。与上述的 ref 不同。

  1. <div ref="box" class="test" id="boxtest">获取真实DOM</div> 
  2.  
  3. //vue2 
  4. <script> 
  5.  export default{ 
  6.   mounted(){ 
  7.    console.log('box', this.$refs.box); 
  8.   } 
  9.  } 
  10. </script> 
  11.  
  12. //vue3 
  13. <script setup> 
  14.  const box = ref(null) 
  15.   onMounted(()=>{ 
  16.   console.log('box',box.value); 
  17.  })   
  18. </script> 

15、vue3 中的 vuex4

createStore 函数创建新的 store 实例。使用之前需要先引入。

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import { createStore } from "vuex" 
  4.  
  5. const store = createStore({ 
  6.  state(){ 
  7.   return{ 
  8.    num:1, 
  9.   } 
  10.  } 
  11. }) 
  12.  
  13. const app = createApp(App) 
  14. app.use(store) 
  15. app.mount('#app') 

组件内使用 store 时，通过 useStore 引入，使用之前也需要引入。

  1. import { useStore } from "vuex" 
  2. const store = useStore() 

使用的时候，与低版本都是一样的。使用 state 内数据时，可以通过 toRefs 解构。

16、v-slot

v-slot 指令只能用在 template 或组件上，否则就会报错。

简化 slot、slot-scope 作用域插槽的功能，相比更加强大，代码效率更高。

使用：

  1. <child-com> 
  2.  <template v-slot:header> 
  3.   头部 
  4.  </template> 
  5.  <template v-slot:body> 
  6.   内容 
  7.  </template> 
  8. </child-com> 

简写：

  1. <child-com> 
  2.  <template #header> 
  3.   头部 
  4.  </template> 
  5.  <template #body> 
  6.   内容 
  7.  </template> 
  8. </child-com> 

17、vue3 中的 vue-router4

createRouter 创建 router 实例，之前的 mode 改为 history 。

  1. import { createRouter,createWebHashHistory } from "vue-router"; 
  2.  
  3. const routes = [] 
  4.  
  5. const router = createRouter({ 
  6.  history:createWebHashHistory('/'), 
  7.  routes 
  8. }) 
  9.  
  10. export default router 

在 main.js 内引入的时候，通过 use 引用。

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import router from "./router/index" 
  4.  
  5. const app = createApp(App) 
  6. app.use(router) 
  7. app.mount('#app') 

关于 vue-router4 更新挺多的，更多知识请阅读《 vue-router 4 你真的熟练吗?》文章。

18、render

在 vue3 中，render 函数的参数发生了改变，之前的 h 去掉，变成全局引入，虚拟节点具备扁平的属性结构。

vue3中 render 应用

  1. import { h } from "vue" 
  2. export default { 
  3.  render(){ 
  4.   return h("div", {}, content) 
  5.  } 
  6. } 

原文链接：https://www.toutiao.com/a7028844355716760078/

标签：

相关文章