likes
comments
collection
share

初识Vue3，Vue3与Vue2的一些小差别有哪些？

作者站长头像
站长
· 阅读数 52

Vue3与Vue2小案例

完成下图效果

初识Vue3，Vue3与Vue2的一些小差别有哪些？

Vue2代码

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>

Vue3代码

<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = ()=> count.value++
</script>

特点

初识Vue3，Vue3与Vue2的一些小差别有哪些？

  1. 代码量变少
  2. 分散式维护变成集中式维护
  3. v3对v2的兼容性很好

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件

Vue3的更多优势

初识Vue3，Vue3与Vue2的一些小差别有哪些？

熟悉V3的项目目录和关键文件

package.json

vue的版本是3 + 依赖vite做底层驱动

vite.config.js

配置文件。类似vue2的vue.config.js。

业务文件夹src/main.js

new Vue() 创建vue的实例对象

createApp也是用来创建vue的实例对象

createApp(App).mount('#app')

mount('#app') 把vue的实例对象挂载在index.html的#app元素上

App.vue

  1. script -> template -> style
  2. script 上的setup是一个特殊的开关：
    1. 打开之后，就可以使用组合式api
    2. 不打开它，就可以继续兼容v2的写法
  1. template中可以不需要唯一的根元素的区别

小结

  1. vite.config.js - 项目的配置文件基于vite的配置

  2. package.json - 项目包文件核心依赖项变成了Vue3.x和vite

  3. main.js - 入口文件 createApp函数创建应用实例

  4. app.vue - 根组件SFC单文件组件script - template - style

    1. 脚本script和模板template顺序调整
    2. 模板template不再要求唯一根元素
    3. 脚本script添加setup标识支持组合式API

  5. index.html - 单页入口提供id为app的挂载点

组合式API - setup选项

setup选项的写法和执行时机

类似于生命周期钩子的写法且执行时机再beforeCreate之前

<script>
  export default {
    setup(){
      console.log('setup')
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
</script>

setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。

初识Vue3，Vue3与Vue2的一些小差别有哪些？

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。

script setup 语法糖

每次需要return是不是太麻烦了？觉得麻烦就对了，接下来介绍setup 语法糖让这个烦恼消失。

初识Vue3，Vue3与Vue2的一些小差别有哪些？

代码如下：

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

组合式API - reactive和ref函数（响应式）

reactive

作用：接收对象类型数据的参数传入并返回一个响应式的对象

步骤

  1. 从vue包中导入reactive函数
  2. 在<script setup>中执行reactive函数并传入类型为对象的初始值，使用变量接收返回值

示例代码：

<script setup>
 import { reactive } from 'vue'  // 导入
 
 const state = reactive({       // 执行函数 传入参数 变量接收
   count:0
 })
 const add = ()=>{
   state.count++ // 修改数据更新视图
 }
</script>

<template>
  <button @click="add">{{state.count}}</button>
</template>

ref

作用：接收简单类型或对象类型数据的参数传入并返回一个响应式的对象

步骤

  1. 从vue包中导入ref函数

  2. 在<script setup>中执行ref函数并传入初始值，使用变量接收返回值

    1. 在模板中使用数据不需加.value
    2. 在代码中使用数据要加.value

示例代码：

    <script setup>
 import { ref } from 'vue' // 导入
 const setCount = ()=>{  // 执行函数 传入参数 变量接收
   console.log(count)
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

两者比较

相同点：reactive和ref都用来生成响应式数据

不同点：

  1. reactive不能处理简单类型的数据
  2. ref参数类型支持更好，但必须通过.value来访问
  3. ref的实现是依赖于reactive的

这里更推荐大家使用ref，减少记忆成本😁

组合式API - computed

它与Vue2中的计算属性思想相同，简单了修改了API写法

步骤

  1. 导入computed函数
  2. 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

示例代码：

<script setup>
// 导入
import { computed } from 'vue'

// 执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
  return 基于响应式数据做计算之后的值
})
</script>

组合式API - watch

作用

侦听一个或者多个数据的变化，数据变化时执行回调函数。

俩个额外参数immediate控制立刻执行，deep开启深度侦听

基础用法侦听单个数据

步骤

  1. 导入watch函数
  2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

示例代码：

<<template>
  <button @click="add">
    {{ count }}
  </button>
</template>
<script setup>
   // 1. 导入watch
  import {ref, watch } from 'vue'
  const count = ref(0)
  const add = () => count.value++
  // 2. 调用watch 侦听变化
  // count: ref参数不需要加.value
  watch(count, (newVal, oldVal) => {
    console.log('旧值为',oldVal,'新值为',newVal )
  })

</script>

侦听多个数据

侦听多个数据，第一个参数写出数组即可

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
  })
</script>

立即监听 immediate

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

直接看代码：

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  }) 
</script>

深度侦听 - 精准侦听

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

未开启deep

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

开启deep之后

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

注意：开启deep的问题它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。（所以接下来就是精确监听）

精确监听

精确监听需要把第一个参数改成函数的写法，并返回要监听的具体属性

直接上代码：

  watch(()=>state.value.name, (newVal, oldVal) => {
    console.log('name变化了')
  })

总结

Vue3与Vue2的差别的小小总结（初步认的总结）

  1. 代码量变少
  2. 使用了组合式API更容易维护
  3. 重新了diff算法使其拥有更快的速度
  4. 因为需要按需引入所以它的体积更小
  5. 响应式方面V3使用Proxy，V2使用Object.defineProperty
  6. setup的出现，定义函数，数据，并以对象的方式return，执行时间在beforeCreate钩子之前
  7. Vue3不再推荐使用this.data去定义和修改数据在setup中的console.log(this)会得到undefined
转载自:https://juejin.cn/post/7252685715967983675
评论
请登录