广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

Vue2 中每个组件里使用 this 都指向当前组件实例，this 上还包含了全局挂载的东西，都知道 this.xxx 啥都有

而 Vue3 中没有 this，如果想要类似的用法有两种，一是获取当前组件实例，二是获取全局实例，如下自己可以去打印出来看看

<script setup>import { getCurrentInstance } from 'vue'// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的const { proxy, appContext } = getCurrentInstance()// 这个 global 就是全局实例const global = appContext.config.globalProperties</script>

Vue2 中我们要往全局上挂载东西通常就是如下，然后在所有组件里都可以通过 this.xxx 获取到了

Vue.prototype.xxx = xxx

而 Vue3 中不能这么写了，换成了一个能被所有组件访问到的全局对象，就是上面说的全局实例的那个对象，比如在 main.js 中做全局注册

// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 添加全局属性app.config.globalProperties.name = '沐华'

在其他组件中调用

<script setup>import { getCurrentInstance } from 'vue'const { appContext } = getCurrentInstance()const global = appContext.config.globalPropertiesconsole.log(global.name) // 沐华</script>

<template>    <el-form ref="formRef"></el-form>    <child-component /></template><script setup lang="ts">import ChildComponent from './child.vue'import { getCurrentInstance } from 'vue'import { ElForm } from 'element-plus'// 方法一，这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定const formRef = ref(null)console.log(formRef.value) // 这就获取到 DOM 了// 方法二const { proxy } = getCurrentInstance()proxy.$refs.formRef.validate((valid) => { ... })// 方法三，比如在 ts 里，可以直接获取到组件类型// 可以这样获取子组件const formRef = ref<InstanceType<typeof ChildComponent>>()// 也可以这样 获取 element ui 的组件类型const formRef = ref<InstanceType<typeof ElForm>>()formRef.value?.validate((valid) => { ... })</script>

Vue2 中进入页面就请求接口，或者其他一些初始化的操作，一般放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 这俩钩子就不用了，因为 setup 在这俩之前执行，还要这俩的话就多此一举了

所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted 这几个钩子里的内容，在 Vue3 中要么放在 setup 里，要么放在 onMounted 里

<script setup>import { onMounted } from 'vue'// 请求接口函数const getData = () => {    xxxApi.then(() => { ... })}onMounted(() => {    getData()})</script>

Vue2 中一般清除定时器、监听之类的操作有两种方法：

一是用$once 搭配 hook: BeforeDestroy 使用，这个 Vue3 不支持了

二是用 beforeDestroy / deactivated 这俩钩子，Vue3 中只是把钩子函数重命名了一下

<script setup>import { onBeforeUnmount, onDeactivated } from 'vue'// 组件卸载前，对应 Vue2 的 beforeDestroyonBeforeUnmount(() => {    clearTimeout(timer)    window.removeAddEventListener('...')})// 退出缓存组件，对应 Vue2 的 deactivatedonDeactivated(() => {    clearTimeout(timer)    window.removeAddEventListener('...')})</script>

这两都是用于创建响应式对象，ref 通常用于创建基础类型，reactive 通常用于创建响应式，这是官方推荐的，现实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放里面，就像 Vue2 的 data 一样，也有人都用

需要知道的有两点：

ref 如果传入的是引用类型，内部源码也是调用 reactive 来实现的

ref 返回的属性在 template 中使用，直接用就是了，但是在 JS 中使用，需要通过 .value 获取，如下。因为 ref 返回的是一个包装对象

<template>    <div>{{ count }}</div></template><script setup>import { ref, reactive } from 'vue'const count = ref(1)// 有人这么用 const arr = ref([])console.log(arr.value) // []// 也有人这么用，一个组件里所有的属性全部定义在一个对象里，有点 Vue2 data 的味道const data = reactive({    name: '沐华',    age: 18,    ...})console.log(data.name) // 沐华// 也有人一个组件里 ref 和 reactive 两种都用，随便你</script>

为什么 ref 要返回一个包装对象？Vue2 中 data 都是返回一个对象这都知道

因为对象引用类型，可以用来做代理或劫持，如果只返回基础类型的话，存储在栈中，执行栈里执行完就回收了，没有办法添加代理或劫持，自然就没办法追踪后续的变化，所以不得不返回一个对象，这样才能有响应式

这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性，如果不用这两直接解构的话是会丢失响应式效果的

主要就是方便我们使用直接变量 xxx，而不需要 data.xxx。并且我们修改 xxx 的时候也是直接修改源对象属性的

这两的区别：带 s 和不带 s，就是单数和复数嘛，意思就是取一个和取一堆咯

<script setup>import { reactive, toRef, toRefs } from 'vue'const data = reactive({    name: '沐华',    age: 18})// 这样虽然能拿到 name / age，但是会变成普通变量，没有响应式效果了const { name, age } = data// 取出来一个响应式属性const name = toRef(data, 'name')// 这样解构出来的所有属性都是有响应式的const { name, age } = toRefs(data)// 不管是 toRef 还是 toRefs，这样修改是会把 data 里的 name 改掉的// 就是会改变源对象属性，这才是响应式该有的样子name.value = '沐沐华华'</script>

watch 就是用来监听一个已有属性，发生变化的时候做某些操作，Vue2 中常用有如下三种写法

watch: {    userId: 'getData',    userName (newName, oldName) {        this.getData()    },    userInfo: {        handler (newVal, newVal) { this.getData() },        immediate: true,        deep: true    }}

而 Vue3 中监听的写法就丰富得多了

Vue3 的 watch 是一个函数，能接收三个参数，参数一是监听的属性，参数二是接收新值和老值的回调函数，参数三是配置项

Vue.prototype.xxx = xxx0

关于副作用，在 watch 回调函数中能接收第三个参数，为清除副作用的函数，它的执行机制默认在更新之前调用，比如如下代码，当 key 触发更新时会先打印 222 再打印 沐华，如果需要在更新之后调用，可以在 watch 第三个配置项中添加 flush: post，

Vue.prototype.xxx = xxx1

监听还没完呢

尤大：嘿嘿~

Vue3 中除了 watch 还增加了一个 watchEffect。区别是：

watch 是对传入的一个或多个值进行监听，触发时会返回新值和老值，且默认第一次不会执行

watchEffect 是传入一个立即执行函数，所以默认第一次就会执行，且不需要传入监听内容，会自动收集函数内的数据源作为依赖，当依赖发生变化时会重新执行函数(有点像computed的味道)，而且不会返回新值和老值

清除副作用和副作用的刷新时机是一样的，区别是 watch 中会作为回调的第三个参数传入，watchEffect 中是回调函数的第一个参数

正常情况下组件销毁/卸载后这两都会自动停止监听，但也有例，比如异步的方式在 setTimeout 里创建的监听就都需要手动停止监听，停止方式如下

Vue.prototype.xxx = xxx2

watchEffect 使用：

Vue.prototype.xxx = xxx3

watchEffect 如果需要修改配置项 flush 为 post 或 sync 时，可以直接使用别名，如下

Vue.prototype.xxx = xxx4

Vue2 中 computed 最见的使用场景一般有： mapGetters/mapState 获取状态管理的属性、 获取 url 上的属性、条件判断、类型转换之类的，支持函数和对象两种写法

而 Vue3 中 computed 不再是一个对象，而是一个函数，用法其实基本差不多，函数第一个参数是侦听器源，用于返回计算的新值，也支持对象写法，第二个参数可用于调试

Vue.prototype.xxx = xxx5

nextTick 的使用方法，除了不能用 this 其他的和 Vue2 一模一样，还是三种方式

Vue.prototype.xxx = xxx6

Vue2 中逻辑的抽离复用一般用 mixins，缺点有三：

没有独立命名空间，mixins 会和组件内部产生命名冲突

不去翻代码不知道引入的 mixins 里面有啥

引入多个 mixins 时不知道自己使用的是来自哪一个 mixins 的

在Vue3中，逻辑可重用的hooks语法实际上是一个函数，可以接受参数并返回值，从而被使用。在Vue3中，编写封装公共方法的方法与平时相同

Vue.prototype.xxx = xxx7

关于 hooks 如何写出更优雅的代码，还个需要多写，多实践

Vue3 组件通信的方式，有如下几种

props + defineProps

defineEmits

defineExpose / ref

useAttrs

v-model(支持多个)

provide / inject

Vuex / Pinia

关于 Vue 组件通信的使用方式，去年我写过一篇文章，上面都罗列的很详细了，就不搬过来了

Vue3的8种和Vue2的12种组件通信

Vue2 中每个组件上只能写一个 v-model，子组件没有写 model 的话，默认在 props 接收 value 即可，修改就是用 this.$emit('input') 事件

Vue3 中每个组件每个组件上支持写多个 v-model，没有了 .sync 和 model 重命名的操作，也不需要了，写v-model 的时候就需要把命名一起写上去了，如下：

Vue.prototype.xxx = xxx8

Vuex 会的就不用说了，不会的就直接学 Pinia 吧

Pinia 的使用方式，我之前也写过一篇文章，也不搬过来了

上手 Vue 新的状态管理 Pinia，一篇文章就够了

Vue2 中的 $route 和 $router 如下，可以自己打印出来看一下

Vue.prototype.xxx = xxx9

Vue2 中只能有一个根节点，而 Vue3 中支持多个根节点，这个大家都知道

其实本质上 Vue3 每个组件还是一个根节点，因为 DOM 树只能是树状结构的，只是 Vue3 在编译阶段新增了判断，如果当前组件不只一个根元素，就添加一个 fragment 组件把这个多根组件的给包起来，相当于这个组件还是只有一个根节点

// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 添加全局属性app.config.globalProperties.name = '沐华'0

Vue2 中在 scoped 中修改子组件或者组件库中的组件样式，改不了的情况下，就可以用样式穿透，不管是 Less 还是 SASS 都是用 /dee/ .class {} 来做样式穿透，而 Vue3 中就不支持 /deep/ 的写法了，换成 :deep(.class)

// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 添加全局属性app.config.globalProperties.name = '沐华'1

就是 CSS 中可以使用 JS 的变量来赋值，如下

// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 添加全局属性app.config.globalProperties.name = '沐华'2

以上就是Vue3开发实例代码分析的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~