1. 搭建工程
1-1. 搭建工程
1-1-1. vue2
使用vue-cli:
vue create vue3-app-vue-cli
1-1-2. vue3
使用vite:
兼容性注意: Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
#使用 vit 创建一个名为demo的项目
npm init vite-app demo
#现版本是使用vit 构建一个项目，可以在后面直接指定项目名称
npm init vue@latest
1-2. 运行
1-2-1. vue2(使用vue-cli)
npm run serve
1-2-2. vue3(使用vite)
npm run dev
2. 重大变化
2-1. 创建方式
和vue2相比没有构造函数Vue
Vue2写法 (main.js) ：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Vue3写法（.mainjs）:
vue3中没有默认导出，即
import Vue from 'vue'导入会报错；
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
注意：
- Vue2升级到Vue3是一个截断式更新，即vue2中可用的部分语法在vue3中是不可用的；
new Vue(options)和createApp(App)返回结果不一样，前者是一个组件对象，后者是一个应用对象，后者比较纯粹没有多余的方法；
2-2. 插件的使用
Vue2:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//vue2使用插件
Vue.use()
new Vue({
render: h => h(App),
}).$mount('#app')
Vue3:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App)
//vue3使用插件
app.use();
app.mount('#app')
2-3. 组件内部
2-3-1. this指向
- Vue2 中
this指向的是当前组件实例 - Vue3中
this指向的是一个 proxy 代理，这个proxy代理的就是组件实例
2-3-2. 写法
vue3: composition api（组合式）
vue2: option api（配置式）
2-3-3. setup 函数
只执行一次，且在所有生命周期钩子函数调用前执行
代码示例：
<template>
<h1>count:{{ countRef }}</h1>
<p>
<button @click="decrease">decrease</button>
<button @click="increase">increase</button>
</p>
</template>
<script>
import { ref } from "vue";
//可以灵活的抽离公共代码，返回通常为对象；
function useCount() {
let countRef = ref(0);
const increase = () => {
countRef.value++;
};
const decrease = () => {
countRef.value--;
};
return {
countRef,
increase,
decrease,
};
}
export default {
setup() {
// console.log("所有生命周期钩子函数之前调用");
// console.log(this); // this -> undefined
// setup中，count是一个对象
// 实例代理中，count是一个count.value
//1. 新增
//2. 修改
//3. 删除
return {
...useCount(),
};
},
};
</script>
3. composition api
3-1. ref
声明一个响应式数据
import { ref } from "vue";
3-2. watchEffect
监控副作用
import { watchEffect } from "vue";
const todosRef = ref("");
// 只要函数应用到了响应式数据，那么响应式数据一旦改变，方法就会执行一次
watchEffect(() => {
todoStorage.save(todosRef.value);
});
return {
todosRef,
};