Vue3.0的学习（1）

相对于Vue2.0 Vue3.0更新了很多。在工作的两年间，使用React做移动端重新回顾了下Vue2.0问题也不大。但是看到各路英雄豪杰跟上时代进程。Vue3.0+vite+pinia等等新技术。升职加薪，这些东西怎么可以不搞懂呢。开始学习吧！

这篇文章基于我学过Vue2.0安装cli，创建项目等等就不再编写。

在2.0中Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({ 
    // 选项 
})

在3.0中Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的

const app = Vue.createApp({
  /* 选项 */
})

一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 <div id="app"></div>，应该传入 #app

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

- 生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期钩子是一个很重要的知识点，知晓生命周期的顺序，合理安排代码位置。Vue2.0与Vue3.0有很多不同，接下来开始学习：

根据官方文档中的图可以很清楚看清各个生命周期及钩子函数。

既然说到这里了，接下来就要看下3.0中Composition API

- SetUp

参数

使用 setup 函数时，它将接收两个参数 props context

props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

需要注意的是，在setup中，props是不能使用解构的，即不能将上面的代码改写成

如果需要解构 可以在 setup 函数中使用 toRefs 函数来完成此操作

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

context

传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    //`attrs`与`Vue2.0`的`this.$attrs`是一样的，即外部传入的未在`props`中定义的属性
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

选项式 API	Hook inside setup
beforeCreate	Not needed
created	Not needed
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写

当钩子被组件调用时将会被执行

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

- reactive与ref

接下来在学习过程中翻阅大佬文章

引用大佬的话 了解Composition API，先从reactive和ref开始

我们在Vue2.0 声明变量在data中返回

export default { 
    data() {
        return { 
            name: 'ms',
            sex: '男' 
        } 
    } 
}

reactive

<template>
  <!--在模板中通过state.name使用setup中返回的数据-->
  <div>{{ state.name }}</div>
   <div>{{ state.sex }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    // 通过reactive声明一个可响应式的对象
    const state = reactive({
      name: "ms"
    });
    // 1秒后将ms修改为马赛
    setTimeout(() => {
      state.name = "马赛";
      state.sex = '男' 
      //并没有声明sex属性但是可以直接添加进去。
    }, 1000);
    // 将state添加到一个对象中然后返回
    return {
      state
    };
  }
};
</script>

ref

<template>
  <div>
    <div>姓名:{{ name }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("ms");
    // 5秒后修改name为马赛
    setTimeout(() => {
      name.value = "马赛";
    }, 1000);
    return {
      name
    };
  }
};
</script>

根据大佬总结 reactive获取或修改属性可以直接通过state.prop来操作，而ref返回值需要通过name.value的方式来修改或者读取数据。但是需要注意的是，在template中并不需要通过.value来获取值，这是因为template中已经做了解套

这篇文章初步学习了 3.0 Composition API 中的 Setup 以及 reactive 和 ref的声明变量，Composition API中在Setup注册生命周期钩子函数；下一章，继续学习！！