关于前端:Vuejs-比较重要知识点总结二

概述

• vue3 组合式 API 生命周期钩子函数有变动吗？
• Composition API 与 Options API 有什么区别？
• watch 和 watchEffect 的区别？
• vue2 如何降级到 vue3 ?

vue3 组合式 API 生命周期钩子函数有变动吗？

选项式 API 和 组合式 API 生命周期钩子比照：

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不须要显示的定义它们。其余的钩子都能够编写到 setup 内。

值得注意的是组合式 API 中的钩子函数，通过在生命周期钩子后面加上“on”来拜访组件的生命周期钩子，须要注册，并且只能在 setup 期间同步应用，因为它们依赖于外部的全局状态来定位以后组件实例。

import {onMounted} from "vue"
export default {setup() {  // mounted
  onMounted(() => {   console.log('Component is mounted!')
  })
 }
}

更多精彩内容，请 微信搜寻“前端爱好者 “， 戳我 查看。

Composition API 与 Options API 有什么区别？

Options API 是啥？

vue2 中咱们把一个 vue 文件中 data、methods、props、mounted、computed 等定义属性和办法，独特解决页面逻辑，这种形式叫做 Options API。

这种形式开发的简单组件，同一个性能的往往须要在不同 vue 配置项中定义属性和办法，代码比拟扩散。如果性能比较复杂，保护代码的时候往往会很难分清每个办法对应的性能，减少了代码保护老本。所以 vue3 舍弃了 Options API，换用 Composition API。

Composition API 是啥？

Composition API 是 vue3 新增的，所以 vue2 没有。

在 Composition API 中，依据代码逻辑性能来组织的，一个性能所定义的所有 API 都会放到一起，这样即便性能简单，代码量增大，都能够一下子定位到某个性能的所有代码，代码保护不便。

它的最大特点就是：高内聚，低耦合。

vue3 依然反对 options API，但咱们更举荐应用 Composition API。

优劣比拟：

• 更好的可编程性。
• 更优的代码组织。
• 更好的逻辑形象能力。
• 对 tree-shaking 敌对，代码也更容易压缩。
• 没有 this，没懊恼。

• 如何应用 Composition API 和 Options API

• Composition API 更好的代码组织，更好的逻辑复用，更好的类型推到
• 小型我的项目，业务逻辑简略，用 Options API
• 中大型项目，业务逻辑简单的，用 Composition API
• Composition API 是为了解决简单业务逻辑而设计的
• Composition API 相似 React Hooks

watch 和 watchEffect 的区别？

它们之间的相同点有：

• watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。
• watch 与 watchEffect 在手动进行侦听、革除副作用 (将 onInvalidate 作为第三个参数传递给回调)、刷新机会和调试方面有雷同的行为。

它们之间的区别有：

• watch 须要传入监听的数据源，而 watchEffect 能够主动手机数据源作为依赖。
• watch 能够拜访倒扭转之前和之后的值，watchEffect 只能获取扭转后的值。
• watch 运行的时候不会立刻执行，值扭转后才会执行，而 watchEffect 运行后可立刻执行。这一点能够通过 watch 的配置项 immediate 扭转。

const numberRef = ref(100)
const state = reactive({
  name: 'test',
  age: 20
})

watch:

watch(numberRef, (newNumber, oldNumber) => {console.log('ref watch', newNumber, oldNumber)
  }
  , {immediate: true // 初始化之前就监听，可选}
)

setTimeout(() => {numberRef.value = 200}, 1500)

watch(
    // 第一个参数，确定要监听哪个属性
    () => state.age,

    // 第二个参数，回调函数
    (newAge, oldAge) => {console.log('state watch', newAge, oldAge)
    },

    // 第三个参数，配置项
    {
        immediate: true, // 初始化之前就监听，可选
        // deep: true // 深度监听
    }
)

setTimeout(() => {state.age = 25}, 1500)
setTimeout(() => {state.name = 'testA'}, 3000)

watchEffect：

watchEffect(() => {
    // 初始化时，肯定会执行一次（收集要监听的数据）console.log('hello watchEffect')
})
watchEffect(() => {
    // 监听的是 state.name 不会监听 state.age
    console.log('state.name', state.name)
})
watchEffect(() => {console.log('state.age', state.age)
})
watchEffect(() => {console.log('state.age', state.age)
    console.log('state.name', state.name)
})
setTimeout(() => {state.age = 25}, 1500)
setTimeout(() => {state.name = 'test1'}, 3000)

vue2 如何降级到 vue3 ?

如果是把之前的 vue2 我的项目降级到 vue3，先卸载旧版本的 vue-cli，装置最新版本。装置实现之后，查看 vue 的版本。

而后须要留神，把我的项目中 vue3 产生扭转或被废除的个性须要进行批改。

如：

• $children 被 vue3 移除，应用 $children 的须要替换为 $ref。
• filters 被移除，更改为 computed。
• $destory 被移除，须要删除掉。
• 插槽的新变动。
• Vuex 应用产生扭转。
• vue-router 应用产生扭转等等。

能够自行在官网查看降级指南。地址如图

地址：https://v3-migration.vuejs.org/zh/

参考地址：

• https://tangjiusheng.com/web/4935.html
• https://blog.csdn.net/weixin_41759744/article/details/125305021