随笔分类 - Vue再出发
摘要：proxy: { [process.env.VUE_APP_BASE_API + '/admin']: { target: 'http://39.98.123.211:8170', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_A
阅读全文
摘要：一、设置 main.js // 1.引入 import * as API from '@/api'; new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this // 2.原型 Vue.prototype.$AP
阅读全文
摘要：<div ref="test"></div> // 获取DOM this.$ref.test
阅读全文
摘要：1、安装nvm控制node版本 2、下载安装nvm https://nvm.uihtm.com/ 3、清缓存，删依赖，重新下载 npm cache clean --force rm -rf node_modules rm package-lock.json npm install
阅读全文
摘要：1、异步引入组件 import { defineAsyncComponent } from 'vue'; const ChildData = defineAsyncComponent(() => import('./components/ChildData.vue')) 2、使用Suspense包裹
阅读全文
摘要：Teleport是一种能够将组件html结构移动到指定位置的技术 <template> <div> <button @click="isShow = true">弹窗</button> <Teleport v-if="isShow" to="body"> <div class="dialog"> <
阅读全文
摘要：1、isRef 2、isReactive 3、isReadonly 4、isProxy：检查一个对象是否由reactive或readonly方法创建代理
阅读全文
摘要：一、作用 祖孙组件实现通信 二、过程 父组件 provide()提供数据，后代组件inject()选项，开始使用这些数据 三、语法 1、祖组件 setup() { let car = reactive({ name: 'su7', print:30 }) provide('car',car) ret
阅读全文
摘要：自定义ref <template> <input type="text" v-model="msg"> <h2>{{ msg }}</h2> </template> <script> import { customRef, ref } from 'vue'; export default { nam
阅读全文
摘要：1、markRaw函数 作用：标记一个对象，使其永远不会成为响应式对象 应用场景： 有些值不值得被设置成响应式的。比如第三方库 当渲染具有不可变数据的大列表时，跳过响应式转换可以提高性能 2、toRaw函数 作用：把reactive响应式对象，变成普通对象 使用场景：用于读取响应式对象对应的普通对象
阅读全文
摘要：1、readyonly：把响应式数据变成只读，深层次 2、shallowReadyonly：把响应式数据变成只读，浅层次 应用场景：不希望数据被修改
阅读全文
摘要：1、概念 轻量化的ref函数和reactive函数，只能进行一层响应式 2、对比 a、shallowRef和ref ref响应式的，可以是基本数据类型和对象，当是对象时，ref会借助reactive生产proxy，实现数据响应式 shallowRef，只能对基本数据类型进行响应式处理 b、shall
阅读全文
摘要：一、作用 简化模板{{xx}}，xx的长度 二、toRef 1、语法 toRef(对象,属性) 2、案例 <template> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>工资:{{ salary }}</h2> <button @click="
阅读全文
摘要：1、优点 代码功能模块化，复用代码 2、建立 新建hooks文件夹，在src下 src/hooks/use功能.js 3、案例 a、模块化 src/hooks/usepoint.js import { reactive, onMounted, onBeforeUnmount} from 'vue';
阅读全文
摘要：vue.config.js const { defineConfig } = require('@vue/cli-service') const {DefinePlugin} = require('webpack') module.exports = defineConfig({ transpile
阅读全文
摘要：一、引入 ，写在setup里面 import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'; 二、与Vue2的关系 setup() > beforecrea
阅读全文
摘要：1、watch：既要指明监视的属性，也要指明监视的回调 2、watchEffect：不要指明监视的属性，监视的回调用哪个属性，就监视哪个属性 3、语法 a、引入 import { watchEffect } from 'vue'; b、使用 // 不用指明监视属性，监视回调中使用的属性 watchE
阅读全文
摘要：一、引入 import {reactive, watch } from 'vue' 二、注意 1、监视reactive定义的响应式对象时，oldval无法正确获取，强制开启深度监视，无法关闭 2、监视reactive对象的某个属性时，deep有效(属性为对象)，属性为字符串或数字 oldvalue可
阅读全文
摘要：1、引用 import {ref, watch } from 'vue' 2、监视两种方法，属性ref，immediate deep可以直接写，比vue2简单 a、监听一个 // 第一种写法，监视 一个 immediate deep watch(num, (newVal, oldVal) => {
阅读全文
摘要：一、与vue2的computed配置功能一致 二、用法 1、引入 import {computed } from 'vue'; 2、计算属性简写(get) setup(props, context){ let fullNmae = computed(() => { return person.fir
阅读全文
