我的vue3学习文档

（1）Vue3的挂载方式改变了

不兼容；
一个新的全局 API：createApp ；
调用 createApp 返回一个应用实例，一个 Vue 3 中的新概念。

import { createApp } from 'vue'

const app = createApp({})

例：main.js界面

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus  from "element-plus"
import 'element-plus/dist/index.css'

const app=createApp(App)

app.use(store).use(router).mount('#app')
app.use(ElementPlus )

同时全局组件的挂载实例对象也改为了app

（2）Vue3.0中的生命周期改变了

不兼容；
#总结：
（1）beforeCreate和Create改成了整合成了一个setup
（2）其他事件加了on的前戳

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。
!注意！！！！！！！！！
除了props和emit外其他生命周期和watch，computed都写在setup函数中。先看到这些，接下来再改。

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from "vue";
export default defineComponent({
  setup(props) {
    onMounted(() => {});

    return {};
  },
  props: [],
  emits: [],
});
</script>

（3）组件属性api变更，如data，methods等

（1）vue2老方法：
可以照常使用，性能不如新方法。

<script>
export default {
  data() {
    return {
      data:'2S',
      state:'22222222222222222'
    }
  },
}
</script>

（2）vue3新方法：
引入：
import { reactive,ref } from 'vue’
export default {
setup () {

return {}
}
}

**用法：**  
 （1）ref（）用于定义基础数据类型；
       	let data=ref(1111)
       取值： data.value
       重新赋值：data.value
 （2）reactive（）用于定义引用类型
       	let data=reactive(id:1,name:'小明'，age：18)
 		reactive取值：
 		直接取，例：
 		 data.id 
 		 注意！！！！！
 		 reactived的值不能直接整个对象赋值
 		 例：
 		 data={id:2,name:大明，age：10}
 		 不会触发响应式，即页面不刷新。

setup生命周期函数
理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
若返回一个渲染函数：则可以自定义渲染内容。

reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
ref函数
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：

{{xxx}}

备注：
接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

(3)vue3新方法的语法糖

<script setup></script>
setup script`语法糖提供了三个新的`API`来供我们使用：`defineProps`、`defineEmits`和`useContext

defineProps 用来接收父组件传来的值props。

defineEmits 用来声明触发的事件表。

useContext 用来获取组件上下文context。

（4）组件插槽，slot改变了

不兼容；
vue2中
父组件：

        <template v-slot:myname="myScope">
          <!-- #myname等同于v-slot:myname,等同于2.5具名插槽旧语法slot="myname" -->
          <!--myname即具名插槽的名字，必须有。
          myScope代表子组件名字为myname的插槽的作用域，可以使用子组件传的值，例：下方myScope.myItem中的myitem就等于子组件中的 :myItem="list" -->
          <h1>{{ myScope.myItem }}</h1>
        </template>

子组件：

        <slot name="myname" :myItem="list"></slot>
        <!--myname是插槽的名字。myItem即传给作用域的键，list为自身的数据，为值-->

子组件data中的数据：

 data() {
    return {
      list: [1, 2, 3, 4],
    };
  },

（5）ref的变化

非兼容；

<div v-for="item in list" :ref="setItemRef"></div>

vue2中
this.$refs.setItemRef获取dom

vue3中
需要绑定在函数中，el为取到的ref的dom，存入itemRefs中

 data() {
    return {
      itemRefs: []
    }
  },
    methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },

全局变量的定义和使用改变。

在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。

但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：

首先在main.js里写一个我们要定义的全局变量，比如一个系统id吧

app.config.globalProperties.$systemId = “10”

1
2

现在在页面里需要使用这个变量，只需要从vue中引入getCurrentInstance即可，注意不能在页面中使用this.

import { getCurrentInstance } from “vue”;
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10
————————————————
版权声明：本文为优快云博主「考拉波斯猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/bhq1711617151/article/details/119279676

或者用script setup标签。