# vue3初体验

# vue3的三种体验姿势

# 1.vite

vite是尤大开发的工具，估计是想取代webpack，体验的时候能清楚感受到速度之快。三种体验姿势最喜欢这种。

npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev

1
2
3
4
5

# 2.vue cli

官方定制的vue-cli 需要升级为最新版本才能体验

npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve

1
2
3
4
5
6

# 3.webpack

直接干就完事

git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install 
npm run dev

1
2
3
4

# vue3的Composition APi

# setup

setup是一个新的选项，可以理解为composition的入口，在函数内部是在beforeCreate之前调用，函数return的内容内容作为渲染的上下文。

# reactive 和 ref

vue2的时候，组件实例在初始化的时候会将 data 整个对象变为可观察对象，通过递归的方式给每个 Key 使用 Object.defineProperty 加上 getter 和 settter ，如果是数组就重写代理数组对象的七个方法。虽然给我们带来的便利，但是在大型项目上来说，性能开销就很大了。
Vue3.0之后不再将主动监听所有的数据，而是将选择权给你，实例在初始化时不需要再去递归 data 对象了，从而降低了组件实例化的时间。
reactive函数接收一个对象作为参数，等价Vue2.x的Vue.observable()
ref接收一个原始值，返回一个包装对象
const count = ref(0) 等价 const count = reactive({value:0})

# toRef 和 toRefs

toRef
1. toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。
```
const state = reactive({
  a: 1,
  b: 2,
})

const aRef = toRef(state, 'a')

aRef.value++
console.log(state.a) // 2
```
1
2
3
4
5
6
7
8
9
10
1. 当要将一个 prop 中的属性作为 ref 传给组合逻辑函数时，toRef 就派上了用场：
```
export default {
  setup(props) {
    useSomeFeature(toRef(props, 'abc'))
  },
}
```
1
2
3
4
5

toRefs

toRefs把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

const state = reactive({
  a: 1,
  b: 2,
})

const stateRefs = toRefs(state)

/*
stateRefs 的类型如下:

{
  a: Ref<number>,
  b: Ref<number>
}
*/

// ref 对象 与 原属性的引用是 "链接" 上的
state.a++
console.log(stateRefs.a.value) // 2

stateRefs.a.value++
console.log(state.a) // 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

解构 / 扩展（使用 ... 操作符）返回的对象，并不会丢失响应性：

const state = reactive({
    newTodo: "",
    todos: [{ id: 1, title: "练习", isCheck: false }],
});


console.log( ...toRefs(state))
或者
const { newTodo } = toRefs(state)

1
2
3
4
5
6
7
8
9

# isRef

检查一个值是否为一个 ref 对象。

# unref

如果参数是一个 ref 则返回它的 value，否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖。

function useFoo(x: number | Ref<number>) {
 const unwrapped = unref(x) // unwrapped 一定是 number 类型
}

1
2
3

# computed

这个属性在vue3里面还是跟vue2一样，感觉没什么变化。

# 全局important

vue2的data，methods，computed等都是挂载到this上，这样就会有一个问题，比如当前模块没有用到computed，那么打包的时候任然会打包computed功能。

所以vue3中，一般是需要用到什么API就去引入什么API，所以速度当然会快。


import { reactive, computed, onMounted } from "vue";

1
2
3

# vue3生命周期


beforeCreate -> 使用setup()

created -> 使用setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 初体验CODE

<template>
  <h1>{{state.count}} * 2</h1>
  <h1>{{double}}</h1>
  <button @click="add">累加</button>
</template>

<script>
import { reactive, computed, onMounted } from "vue";
export default {
  setup() {
    const state = reactive({
      count: 1,
    });
    function add() {
      state.count++;
    }
    const double = computed(() => {
      return state.count * 2;
    });

    onMounted(() => {
      console.log("mounted");
    });

    return { state, add, double, onMounted };
  },
};
</script>
<style scoped>

</style>