1. 搭建工程

1-1. 搭建工程

1-1-1. vue2

使用vue-cli:

1
vue create vue3-app-vue-cli

1-1-2. vue3

使用vite:

兼容性注意:
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

1
2
3
4
5
#使用 vit 创建一个名为demo的项目
npm init vite-app demo

#现版本是使用vit 构建一个项目，可以在后面直接指定项目名称
npm init vue@latest

1-2. 运行

1-2-1. vue2(使用vue-cli)

1
npm run serve

1-2-2. vue3(使用vite)

1
npm run dev

2. 重大变化

2-1. 创建方式

和vue2相比没有构造函数Vue

Vue2写法 (main.js) ：

1
2
3
4
5
6
7
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' 导入会报错；

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

注意：

  1. Vue2升级到Vue3是一个截断式更新，即vue2中可用的部分语法在vue3中是不可用的；
  2. new Vue(options) 和 createApp(App) 返回结果不一样，前者是一个组件对象，后者是一个应用对象，后者比较纯粹没有多余的方法；

2-2. 插件的使用

Vue2:

1
2
3
4
5
6
7
8
9
10
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:

1
2
3
4
5
6
7
8
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指向

  1. Vue2 中 this 指向的是当前组件实例
  2. Vue3中 this 指向的是一个 proxy 代理，这个proxy代理的就是组件实例

2-3-2. 写法

vue3: composition api（组合式）
vue2: option api（配置式）

2-3-3. setup 函数

只执行一次，且在所有生命周期钩子函数调用前执行

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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

声明一个响应式数据

1
import { ref } from "vue";

3-2. watchEffect

监控副作用

1
2
3
4
5
6
7
8
9
10
import { watchEffect } from "vue";
const todosRef = ref("");
// 只要函数应用到了响应式数据，那么响应式数据一旦改变，方法就会执行一次
watchEffect(() => {
    todoStorage.save(todosRef.value);
});

return {
    todosRef,
};

__END__