Vue3.0

哈呀
129 阅读1分钟
  • vuecli 4.5以上
  • 入口使用createApp,创建实例对象

setup函数

  • 在组件实例化，然后初始化props，然后调用setup函数，setup会在beforeCreate钩子调用之前调用
  • 返回值为一个对象

image.png reactive类似于data,是个函数，返回响应式的对象

  • setup中无法使用this
  • vue3.2可以简写setup
  • 语法糖
只需要在script上添加setup,不需要返回setup

reactive

reactive类似于data,是个函数，返回响应式的对象

ref

reactive返回响应式的对象,返回值只包含一个value属性

image.png

reactive ref结合使用

image.png ref不需要使用.value赋值

ref和reactive区别

  • ref一般处理基本数据类型，reactive一般处理复杂数据类型并且不能处理基本数据类型

image.png

toRefs

image.png ES6中扩展运算符解构会取消响应式的state，所以需要使用toRefs

image.png

unref()

如果参数是一个 ref 则返回它的 value，否则返回参数本身。

const valueRef = ref(''); 
const value = unref(valueRef); 
if (!value) { console.warning('请输入要拷贝的内容！'); return; }

computed

计算属性

image.png

watch

监听

image.png 清除监听

image.png

钩子函数

image.png

image.png

路由

createRouter

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

路由模式

image.png

image.png route可以获取路由链接的参数

image.png 组间内守卫

image.png 导航解析过程

image.png vue3路由添加的属性

image.png

异步组件

provide inject传递接收参数，不支持异步数据 image.png 解决provide异步数据无法传递问题

image.png

  • 异步组件

image.png 配合async await list组件内使用async await 请求数据 image.png

vuex

createStore image.png 组件内使用

image.png getter

image.png mutation action

image.png echarts使用4.9.0，最新不稳定

获取dom

image.png

添加typescript

image.png typescript形式引入需要有完整的地址

image.png aixos封装

image.png

hooks

image.png 不能在异步组件中定义钩子函数，这时候需要引入hooks

avatar
文章
阅读
粉丝