vue3直接上手需要知道哪些

乐悠刘
544 阅读4分钟

有幸参与一次公司vue3项目开发，项目结束把vue3的一些新特性整理出来。

Vue3的改进及特点

1.性能的提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%。（CV来的官方话）

2.新推出的Composition API 使组件更易维护，减少无用数据绑定页面更流畅。

4.更好TypeScript支持，可以在创建命令里直接配置，页面集成畅通无阻。

5.Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。

6.Vue3兼容大部分Vue2的特性，用Vue2代码开发Vue3都可以。但是vue3.x中会先执行setup方法，再执行兼容2.x的其他方法，比如data、computed、watch等， 并且在setup执行过程中，无法访问data中定义的属性，因为此时还未执行到data方法

首先看一下vue2:

<template>
  <div class="index">
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {
  },

  filters: {
  },

  mixins: [],
  props: {
  },

  data () {
    return {
    }
  },

  computed: {
  },

  watch: {
  },

  mounted () {
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>

</style>

vue3：

<template>
</template>

<script>
export default {
 name: 'index',
 components: {
 },
 
 props: {
 },


 setup(props,context) {
 return {
 
 }
}
</script>

<style lang="scss" scoped>

</style>

vue-cli脚手架创建vue3项目：

   // 安装或者升级
   npm install -g @vue/cli
   
   //查看版本 保证 vue cli 版本在 4.5.0 以上
   vue --version
   
   // 创建项目
   vue create my-project
   
   //然后根据提示一步一步操作

使用vite创建vue3项目：

vite官网：vite官网 更多的学习可以查看vite官网，已经讲解的十分细致了。

vite是一种全新的前端构建工具，相比传统的webpack在性能上有了质的提升。

   // 初始化viete项目
   npm init vite-app <project-name>
   
   // 进入项目文件夹
   cd <project-name>
   
   // 安装依赖
   npm install
   
   //启动项目
   npm run dev

生命周期

详细可以看这篇文章

template

Vue3是允许我们有多个根节点的

setup

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口，也是第一个要使用的函数。

使用setup时，它接受两个参数 setup(props,context)

props: 组件传入的属性

props: 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性。

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。如果想使用解构又还想保留他的响应式可以使用toRefs

context：上下文对象，可以通过es6语法解构setup(props, {attrs, slots, emit})

attrs: 获取当前组件标签上所有没有通过props接收的属性的对象, 相当于 this.$attrs

slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

emit: 用来分发自定义事件的函数, 相当于 this.$emit

setup 中无法使用 this 对象，所以 context 对象在 setup() 中暴露三个属性 attrs 、slots 和 emit 因为在 setup 函数中还没有创建Vue实例，是无法使用 vm.attrs、vm.attrs、vm.slots 和 vm.$emit 的，所以这三个属性充当了这样的作用，使用方法相同。

setup方法在组件生命周期内只执行一次，不会重复执行，所有的Composition API函数都在此使用。

所有的代码逻辑将在setup方法中实现，包括data、watch、computed、methods、hooks，并且不再有this。

setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板中就不可以使用return中返回对象的数据。

在 vue2.x 中， 定义数据都是在data中， 但是 Vue3.x 可以使用reactive和ref来进行数据定义。reactive用于处理对象的双向绑定，ref则处理 js 基础类型的双向绑定

reactive

const people = reactive({
  name: '张三',
  age: 18,
  sex: '女'
})

ref

定义一个响应式的数据(一般用来定义一个基本类型的响应式数据Undefined、Null、Boolean、Number和String)

const time = ref(null)

const number = ref(0)

const name = ref('张三')

const isTrue = ref(false)

const arr = ref([1,3,4,56,6])

script中操作数据需要使用xxx.value的形式，而模板中不需要添加.value

 setup() {
    // ref用于定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性
    //如果需要对数据进行操作，需要使用该Ref对象的value属性
    const count = ref(0);
    function updateCount() {
      count.value++;
    }
    return {
      count,
      updateCount,
    };
  },

在Vue2中我们通过this.$refs来获取dom节点，Vue3中我们通过ref来获取节点

首先需要在标签上添加ref='xxx'，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致

一定要在setup的return中返回，不然会报错。

image.png

image.png

image.png

不能对reactive定义的对象使用解构，这样会消除他的响应式，我们可以用 toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象

const state = reactive({ foo: 1, bar: 2 }) 
const stateAsRefs = toRefs(state)

变更

插槽: 在 Vue2.x 中具名插槽和作用域插槽分别使用slot和slot-scope来实现， 在 Vue3.0 中将slot和slot-scope进行了合并同意使用v-slot。

  • vue2
<!--  子组件中：-->
<slot name="title"></slot>

<!--  父组建中：-->
<template slot="title">
    <h1> Vue2插槽 </h1>
<template>
  • vue3
<!-- 父组件中使用 -->
 <template v-slot:title>
   <div> Vue3插槽 </div>
</template>

v-model:

  • 变更：在自定义组件上使用v-model时， 属性以及事件的默认名称变了

  • 变更：v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里

  • 新增：同一组件可以同时设置多个 v-model

  • 新增：开发者可以自定义 v-model 修饰符

avatar
文章
阅读
粉丝