Vue3
关注
分享
扫一扫
Vue3使用详情
前端-小鑫
这个作者很懒，什么都没留下…
展开
-
vue3 快速掌握 Composition API 大全
setup学习传送门setup函数是 Composition API vue2中在一个组件中会 有data methods computed等多个属性 当组件越来越大则会增加复杂度以及维护难度， setup 则是将这些内容全部合并 执行时间在beforecreate与create之间 两个参数 props（父组件传递的值） context （attrs, slots, emit） 需要使用的值或函数，必须return出去 setup中不能写this ， 因为是在create实例之前还未创建，原创 2021-07-28 15:13:45 · 238 阅读 · 0 评论 -
vue3 vuex使用与详情
使用vue-cli后选择需要vuex 将会生成一个store ，目录格式如下，如不清楚store，mutations，action，module 等可以去查阅文章Vueximport { createStore } from 'vuex'export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }})获取相应值以及更改值<template&g原创 2021-07-28 14:46:09 · 342 阅读 · 0 评论 -
vue3 使用ref获取dom元素
vue 2.x获取DOM<div ref="test"></div>this.$refs.testvue 3获取单个或多个DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n原创 2021-07-28 13:57:25 · 815 阅读 · 0 评论 -
vue3 provide与inject的使用与详情
定义值，获取值provide第一个参数是key，第二个参数是value inject第一个参数是获取provide的key，从而获取value ，第二个是如为获取到相应的值则给一个默认值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-07-27 20:45:32 · 1237 阅读 · 0 评论 -
vue3 生命周期函数
mounted 等于 onMountedbeforeUpdate 等于 onBeforeUpdateUpdated 等于 onUpdatedbeforeUnmount 等于 onBeforeUnmount<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE.原创 2021-07-27 17:28:16 · 220 阅读 · 0 评论 -
vue3 watch与watchEffect的使用与详情
watch与watchEffect的区别相同点：都是可以监听数据变化不同点：watch可以监听到之前的值与更改后的值，但watchEffect不行原创 2021-07-27 17:15:48 · 443 阅读 · 0 评论 -
vue3 computed计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-07-27 16:21:42 · 314 阅读 · 0 评论 -
vue3中toRefs与toRef的使用详情
torefs 将结构解析出来的值具有响应式 toRefs原理原本是proxy({name:'aa'})toRefs转换后变成{name:proxy(value:'aa')}例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...原创 2021-07-27 14:49:17 · 1849 阅读 · 0 评论 -
vue3 readonly使用详情
readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应 如强制修改 控制台将会报错警告代码使用如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na原创 2021-07-27 14:42:11 · 3124 阅读 · 0 评论 -
vue3 ref 和reactive的使用与区别
ref 处理基础类型的例如字符串，数字（注：修改值需要用value，但使用时不需要点value vue3内部已经将其处理） reactive 处理引用类型 例如 数组，对象。 内部原理通过 ref reactive （{context:'aa'}）会变成proxy({context:'aa'}) 响应原理 缺点：如将对象或数组数据解构后再retun，return出来后的值将不会具有响应式，因为reactive响应是数组或对象，需要配合toRefs 具体使用请问文章toRefsref 处理基本类型..原创 2021-07-27 14:33:05 · 753 阅读 · 0 评论 -
vue3 setup使用
setup函数是 Composition API vue2中在一个组件中会有datamethodscomputed等多个属性当组件越来越大则会增加复杂度以及维护难度，setup则是将这些内容全部合并 在实例初始化之前create之前组合api 两个参数propscontext 需要使用的值或函数，必须return出去 setup中不能写this ， 因为是在create实例之前还未创建， 所以拿不到实例setup函数中， 不能调用外部的函数， 例如methodsmount...原创 2021-07-27 14:15:36 · 1166 阅读 · 0 评论 -
vue3创建使用
Vite项目管理工具，代替webpack安装npm install -g create-vite-app创建create-vite-app demo安装依赖运行项目cd demonpm installnpm run devwebpack项目管理工具git clone '地址' democd demonpm installnpm run devVue-cli项目管理工具npm install -g @vue/clivue create democd dem原创 2021-07-27 13:09:00 · 128 阅读 · 0 评论