随笔分类 - vue3.0+
摘要：在开发中，如果没有动画的话，整个页面内容的显示和隐藏会非常的生硬！不好看，为了给予一定的用户体验，进入今天的主题 目录 一、Transition组件 1.Transition组件的原理 进入 离开 2、Transition组件中使用transition 代码 效果 说明 3、Transition组件
阅读全文
摘要：目的：介于产品非要我实现进入详情页出来页面筛选项不变这个需求~于是我学习了下 一、介绍 keepalive是Vue的内置组件，作用是将组件缓存在内存当中，防止重复渲染DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法vue2.x与vue3.x有部分差别。以下主要将keepali
阅读全文
摘要：现在的流行框架，无论React还是Vue，都采用虚拟DOM。 好处就是，当我们数据变化时，无需像Backbone那样整体重新渲染，而是局部刷新变化部分，如下组件模版： <ul class="list"> <li>item1</li> <li>item2</li> </ul> 当页面中item2变为i
阅读全文
摘要：shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，加这一段是是告诉 ts，vue 文件是这种类型的。这一段删除，会发现 import 的所有 vue 类型的文件都会报错。 /** * shim
阅读全文
摘要：UU 前段时间，对部门的个别项目进行Vue3.0+ts框架的迁移，刚开始研究的时候也是踩坑特别多，尤其我们的项目还有些特殊的webpack配置，所以，研究vue.config.js的配置的时候也是查阅了各种资料文档，最终，完成了项目webpack的特殊配置。 今天分享一下，我们项目当中的一些webp
阅读全文
摘要：问题描述：vue3.0使用sass预处理器使用::v-deep深度选择器抛出如下警告 [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead
阅读全文
摘要：vue3.0 前言： 这里分享3.0和2.0 的方法对比, nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它vue3.01、引入 import { nextTick } from 'vue' 2、具体使用，配合异步 setup() {
阅读全文
摘要：对于 Vue.nextTick 方法，自己有些疑惑。在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。 概览 官方文档说明： 用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 疑问： DOM 更新循环是指什么？ 下次更新循环
阅读全文
摘要：vue提供install可供我们开发新的插件及全局注册组件等install方法第一个参数是vue的构造器，第二个参数是可选的选项对象 export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 } } 全局注册组件 import PageTools
阅读全文
摘要：1、响应系统的变动 由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。 Proxy的属性及方法 2、虚拟DOM重写（Virtual DO
阅读全文
摘要：前言 这几天 Vue 3.0 Beta 版本发布了，本以为是皆大欢喜的一件事情，但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点： 意大利面代码结构吐槽： “太失望了。杂七杂八一堆丢在 setup 里，我还不如直接用 react”我的天，3.0 这么搞的话，代码结构不清晰，语义不明确
阅读全文
摘要：需求：将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，直接赋值丢失了响应性 // arr = res; //
阅读全文
摘要：ref和toRef区别: ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式
阅读全文
摘要：需求：将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，直接赋值丢失了响应性 // arr = res; //
阅读全文
摘要：vue-config-js配置参考 vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建 创建vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它
阅读全文
摘要：theme: cyanosishighlight: zenburn 目前setup sugar已经进行了定稿，vue3 + setup sugar + TS的写法看起来很香,写本文时 Vue 版本是 "^3.2.6" script setup 语法糖 新的 setup 选项是在组件创建之前, pro
阅读全文
摘要：正常引入方式： // 导入Vue import Vue from 'vue' // 导入路由 import Router from 'vue-router' // 导入登录组件 import Login from '@/components/login/Login' // 导入Home组件 impo
阅读全文
摘要：Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。Vue 3.2 原文链接 https://blog.vuejs.org/posts/vue-3.2.html 主要更新如下： 1. 新的单文件组件功能<script setup> 是一种编译时语法糖，可在 SFC 内使用 Com
阅读全文
摘要：reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组例如：定义一个对象类型的变量user <template> <div> <p>{{ user }}</p> <bu
阅读全文
摘要：两者核心区别就是类型提示，像定义组件需要 defineComponent 同出一辙： Vue3 import { createStore } from "vuex"; import example from './modules/example' export default createStore
阅读全文
浙公网安备 33010602011771号