vue3.0初认识

前言

vue经历从2.0到3.0更新之后，简⽽⾔之就是变得更轻，更快，使⽤起来更加⽅便，每⼀次的版本迭代都是对上⼀个版本的升级优化，不管 是对于我们开发者还是对于⽤户体验都是不断地在越来越⽅便。
vue3.0的优化：
（1）性能提升

• 打包大小减少41%
• 初次渲染快55%，更新渲染快133%
• 内存减少44%
• 使用proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现
• Tree-Shaking
  （2）新增特性：Composition API、setup、新组件等

创建项目

（1）采用脚手架方式

  // 查看vue-cli 版本
  vue -V
  // 安装或者升级你的@vue/cli
  npm install -g @vue/cli
  // 创建项目
  vue create vue_test
  // 启动
  cd vue_test
  // 运行服务
  npm run serve

（2）vite创建

// 创建项目
npm init vite-app <project-name> (创建工程名称)
// 进入工程目录
cd <project-name>
// 安装依赖
npm install
// 运行
npm run dev
// 使用vite 运行项目速度极快, 吊打webpack 

vite是什么？
vite：是由原生ESM驱动的WEB开发构建工具，是尤雨溪团队打造，要挑战一下webpack 前端构建工具。
vite的优势：

• 快速的冷启动，不需要等待打包操作；
• 即时的热模块更新，替换性能和模块数量的解藕让更新飞起；
• 真正的按需编译，不再等待整个应用编译完成。
  在创建项目中：
  main.js：引入的不再是Vue 构造函数, 引入的是一个名为createApp 的工厂函数

  import { createApp } from 'vue';
  import App from './APP.vue'
  createApp(App).mount('#app')
  // 创建应用实例对象--> app 类似于vue2.0 vm  但是app比vm 更"轻"
  const app = createApp(App)
  console.log(app);
  // createApp(App).mount('#app')
  app.mount('#app')
 
  // new Vue({
  //   render: h=>(App)
  // }).$mount('#app')

创建应用实例对象 --> app 类似与vue2.0 中的vm 但是app比vm 更"轻"
打印出来的app 是一个对象, 对象身上的属性更少。

Composition API-setup函数

setup函数是新的option（入口函数），所有的组合API函数都在此使用，只在初始化时候执行一次。
setup函数如果返回对象，那对象中的属性或方法在模版中可以直接使用。

<template>
  <div>
    <h3>{{ n }}</h3>
    <h3>{{ m }}</h3>

    <h3>msg: {{ msg }}</h3>
    <h3>msg2: {{ $attrs.msg2 }}</h3>

    <slot name="xxx"></slot>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'

export default defineComponent({
  name: 'child',

  props: ['msg'],

  emits: ['fn'], // 可选的, 声明了更利于程序员阅读, 且可以对分发的事件数据进行校验

  data() {
    console.log('data', this)
    return {
      // n: 1
    }
  },

  beforeCreate() {
    console.log('beforeCreate', this)
  },

  methods: {
    // update () {
    //   this.n++
    //   this.m++
    // }
  },

  // setup (props, context) {
  setup(props, { attrs, emit, slots }) {
    console.log('setup', this)
    console.log(props.msg, attrs.msg2, slots, emit)

    const m = ref(2)
    const n = ref(3)

    function update() {
      // console.log('--', this)
      // this.n += 2
      // this.m += 2

      m.value += 2
      n.value += 2

      // 分发自定义事件
      emit('fn', '++')
    }

    return {
      m,
      n,
      update
    }
  }
})
</script>

由上面可以看出：

1.执行时机

1、setup函数是在beforeCreate生命周期回调之前就执行，而且就执行一次，由此可以推断出：setup函数在执行的时候，当前的组件还没有创建出来。
2、setup函数中的this是undefined，所以不能通过this调用data/computed/methods/props相关内容，同时所有的composition API相关回调函数也都是不可以

2.返回值

1、一般都返回一个对象，为页面模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法；
2、setup中对象的属性和data函数中对象的属性会合并为组件对象的属性；
3、setup中对象的方法也会和methods中方法合并为组件对象的方法；
4、一般在Vue3.0中尽量不要混合使用Vue2.0中的语法，因为methods中可以访问到setup函数中提供的属性和方法，但在setup中不能访问data和methods；
5、setup 不能是一个 async 函数: 因为返回值不再是 return 的对象, 而是 promise, 这样模板看不到 return 对象中的属性数据

3.setup参数

• setup(props, context) / setup(props, {attrs, slots, emit})
• props: 包含props 配置声明且传入了的所有属性的对象
• attrs: 包含没有在 props 配置中声明的属性的对象, 相当于this.$attrs
• slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
• emit:用来分发自定义事件的函数, 相当于 this.$emit