![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 79
ZjSj0812
这个作者很懒,什么都没留下…
展开
-
vue3.0 composition api
文章目录简单demosetup参数setup生命周期响应式APIreactivereftoRefs与toRefcomputedwatch在vue2中如果新增一个功能,需要在data中添加数据,在methods或computed或watch中添加逻辑,那么数据与业务逻辑是分散的。这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块。如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API原创 2021-03-26 16:45:30 · 331 阅读 · 0 评论 -
基于G6的流程图绘制
最近项目中,有一个功能为流程图绘制,且需要根据当前以走到的流程在流程图中进行高亮。一开始是基于cavans进行绘制,但是由于绘制路线太多,计算点太多,最终放弃,选择基于g6重新进行了流程图绘制,该文章主要针对流程图模块,进行G6一些配置项的说明。安装: npm install --save @antv/g6引用: import G6 from '@antv/g6'简单demodata() { return { nodes: [{ id:原创 2021-03-22 17:42:32 · 2284 阅读 · 0 评论 -
Vue3 的新特性 —— 虚拟DOM的底层原理
本文原地址:Vue3 的新特性(二) —— Composition-ApiVdom (虚拟dom)凭借着出色的性能成为了目前的主流的前端框架都会选择的渲染方案。再加上优秀的 diff 算法对它的一步步的优化,使框架的价值得到了极致的体现,几乎成为了我们前端开发必不可少的方案。我们已经知道,Vue2.x 中的 Vdom 已经相当出色了,性能非常优秀。不过令人兴奋的是,尽管它够快,但在 Vue3 中还是对 Vdom 进行了重写,使 Vue3 突破了 Vdom 的性能瓶颈,更快!Vue3 如何重写 Vdom转载 2021-02-25 14:16:05 · 834 阅读 · 0 评论 -
Vue中Vnode的创建与处理
什么是虚拟DOM虚拟DOM(Virtual DOM)是使用JavaScript对象描述真实DOMVue.js中的虚拟DOM借鉴Snabbdom,并添加了Vue.js的特征,例如:指令和组件机制为什么要使用虚拟DOM:避免直接操作真实DOM,提高开发效率作为一个中间层可以跨平台,支持web端渲染,还可以支持服务端渲染虚拟DOM不一定可以提高性能:首次渲染的时候会增加开销复杂视图情况下提升渲染性能h函数vm.$createElement(atg, data, children,原创 2020-11-27 16:38:44 · 18924 阅读 · 0 评论 -
vue-set/delete/nextTick源码简读
Vue.set与vm.$set是向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新在vue中,一般会对初始化的数据进行响应式处理原创 2020-11-13 17:04:05 · 106 阅读 · 0 评论 -
Vue中的响应式处理(源码解读)
文章目录响应式处理入口响应式处理入口Observer函数定义在src/core/observer/index.js中,首先,我们来看一下这个函数的源码:export function observe (value: any, asRootData: ?boolean): Observer | void { // 判断value是否是对象 if (!isObject(value) || value instanceof VNode) { // 如果不是一个对象或者是vNode的一个实原创 2020-11-10 18:00:38 · 440 阅读 · 0 评论 -
vue初始化——源码简读
文章目录源码目录结构Vue的构建版本完整版与运行时版本的区别template与render执行顺序Vue函数的初始化Vue静态方法初始化Vue实例成员初始化过程Vue实例成员init方法Vue实例成员initState方法源码目录结构这里主要分析src目录下文件的主要功能compiler:与编译相关core:Vue核心代码components:keep-alive相关代码global-api:Vue静态成员相关初始化instance:Vue实例相关初始化observer:响应式相关代码原创 2020-10-27 15:17:36 · 424 阅读 · 0 评论 -
vue-router使用
文章目录路由使用编程式导航路由参数嵌套路由hash与history模式的区别路由钩子路由使用编程式导航push,replace,go(-1)与back的效果一样路由参数props嵌套路由hash与history模式的区别hash模式,(基于锚点与ononhashchange)history模式 (基于HTML5中history Api, pushState(IE10以后才支持), replacereplaceState)history需要服务器支持,单页应用中,地址找不到会返回找不到该原创 2020-10-09 15:55:45 · 129 阅读 · 1 评论 -
Vue中实现父子组件双向数据传递的方式
文章目录双向数据传递v-mode双向数据传递这里提到的父子组件双向数据传递,即父子组件可以进行互相修改我们知道一般父向子传值,子通过props进行接收,子向父传值,是通过$emit发布一个事件,父通过事件的监听获取到子的值,详细可见vue-组件之间的通信这里我们通过v-model,model及sync来实现父子双向的数据传递v-mode在vue中的一些表单中,我们经常通过v-mode来实现数据的双向绑定,但其实v-model的本质是一个语法糖,如下代码<input v-model="原创 2020-09-05 09:49:29 · 976 阅读 · 0 评论 -
基于elementUI的分页表格组件封装
在后台管理系统中,会经常大量的使用表格与分页,以下基于elementUI实现一个简单的table与pagination的封装这里在pageSize发生变化的时候,会令currentPage为1,即表格跳转到第一页,这里这么做的目的在于:例如当前页为10,当修改pageSize后,由于每页数据量变大,此时最大页数如果小于10,那么会再次触发current-change事件的发生,对到项目中,一般是会进行两次请求,因此这里直接跳转到第一页,那么由于是第1页,就不会触发current-change事件的发生原创 2020-09-03 17:50:05 · 1607 阅读 · 0 评论 -
vue中mixins、extends、extend使用及区别
文章目录mixinsmixinsmixins:选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中应用场景:在项目中,如果我们需要提取公用的数据或者通用的方法,并且这些数据与方法不需要组件间进行维护,就可以使用mixins...原创 2020-08-10 11:02:44 · 5050 阅读 · 0 评论 -
vue-cli3.0搭建服务端渲染SSR
文章目录关于SSR什么是SSR为什么要用SSRSSR原理通用代码约束:构建SSR应用程序创建vue项目修改router/index.js修改store/index.js修改main.js服务端数据预取客户端数据预取构建配置webpack进行打包操作创建服务关于SSR什么是SSR可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序简单点说:就是将页面在服务端渲染完成后在客户端直接显示。无需等待所有的 JavaScript原创 2020-07-31 21:58:04 · 2914 阅读 · 5 评论 -
简单实现vue中的依赖收集与响应
文章目录开始添加Observer添加Watcher添加Dep开始声明一个对象man,可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式,只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例,将man作为参数扔进去。这里的proxyData是将man的属性代理到以man为参数的Observer实例上去。class Ob转载 2020-07-03 17:53:52 · 305 阅读 · 0 评论 -
vue - 组件之间的通信
1. 父组件向子组件进行值传递 子组件通过props属性进行数据接收 parent.vue<template> <div> <Child :data="data"></Child> </div></template><script> import Child ...原创 2018-08-01 17:00:38 · 394 阅读 · 0 评论