vue
文章平均质量分 56
屈小康
早睡早起吧 球球了!!!!
展开
-
Vue3相关语法内容,组件传值,事件监听,具名插槽,project/inject,组件内外双向数据绑定v-model。
reactive (target:T) // 源码实例 继承与 object。原创 2024-06-07 16:37:08 · 523 阅读 · 0 评论 -
object.defineproperty方法解析/自己实现一个object.defineProperty/Vue3中的Proxy解析和实现
需要注意的是,Object.defineProperty() 方法只能定义或修改单个属性。这也就是说如果有多个的话,必然在Vue的源码中有一个循环遍历。需要注意的是,Object.defineProperty() 方法只能定义或修改单个属性。这也就是说如果有多个的话,必然在Vue的源码中有一个循环遍历。需要注意的是,Object.defineProperty() 方法只能定义或修改单个属性。是一个描述符对象,用来指定属性的特性。是一个描述符对象,用来指定属性的特性。是一个描述符对象,用来指定属性的特性。原创 2023-06-08 10:44:21 · 1278 阅读 · 0 评论 -
Vue2.x和Vue3.x的区别
vue2.x和vue3.x的区别原创 2023-02-14 14:56:36 · 443 阅读 · 0 评论 -
vue2.x和3.x的双向绑定原理
1、vue2.x采用的是object.defineProperty1、vue2.x的双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的,通过object.defineProperty来劫持各个属性的setter,getter,在数据变化时发布消息给订阅者,触发相应的监听回调来渲染视图。也就是说数据和视图同步,数据发生变化,视图变化,视图变化,数据也随之发生变化。2、Obejct.defineproperty(obj,prop,descriptor)方法,接收三个参数,分别是obj(定义其上属性原创 2022-04-11 17:46:23 · 2926 阅读 · 0 评论 -
长列表渲染优化
为什么要使用虚拟列表?当数据量很大的时候,像有10万条数据的时候,我们一次性获得所有数据是不可能的,当然我们也可以使用分页的效果,但是这样用户的体验就不好了,用户喜欢往下滑动获得数据展示。当时当我们根据滑动获取数据的时候就会遇到另一个问题,不停的加载数据,导致页面堆积的节点越来越多,内存不断的增加,最后连滚动都出现了卡顿。所以虚拟列表蕴蓄而生什么是虚拟列表?虚拟列表也没有什么特别的地方,就是在页面上创建一个容器作为可视区,在这个可视区内展示长列表中的一部分,也就是在可视区域内渲染列表。一个简原创 2021-09-26 20:20:52 · 694 阅读 · 0 评论 -
什么是虚拟DOM?虚拟DOM的定义和作用?
虚拟DOM的作用和定义什么是虚拟DOM虚拟DOM就是普通的js对象。是一个用来描述真实dom结构的js对象,因为它不是真实的dom,所以才叫做虚拟dom。虚拟dom的作用我们都知道传统的dom数据发生变化的时候,我们都需要不断的去操作dom,才能更新dom数据,虽然后面出现了模板引擎,可以让我们一次性更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制,当引擎内某个数据发生变化时,它依然操作dom去重新渲染整个引擎。而虚拟dom可以很好地跟踪当前dom状态,因为它会根据当前数据生成一原创 2021-09-03 14:17:41 · 10580 阅读 · 0 评论 -
Render函数的解析,template的作用
1、什么是render函数 简单来说,在vue中我们使用模板HTML语法组件页面的,使用render函数我们可以用js语言来构建DOM。 因为vue是虚拟DOM,所以在拿到template模板的同时也需要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。 当使用使用render函数描述虚拟DOM时,vue提供一个函数,这个函数就是构建虚拟DOM所需的工具。官网起名叫createElement。类型:(c原创 2021-09-03 11:26:40 · 3204 阅读 · 2 评论 -
Vue中的v-slot详解,作用域插槽和具名插槽
插槽在2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法,即v-slot。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute中。插槽内容Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。它允许你像这样合成组件:...原创 2021-08-23 09:28:36 · 24782 阅读 · 0 评论 -
Vue的那些事情
1. Vue通信的方法有多少种?1.1 Vue 2.x的通信方式有1.第一种可以直接通过prop进行通信。2.第二种通过$emit 和 on。3.通过project和inject。4.通过vuex。5.通过slot插槽。6.on。3.通过 project 和 inject。4.通过vuex。5.通过slot插槽。6.on。3.通过project和inject。4.通过vuex。5.通过slot插槽。6.attrs 和 $listeners。1.2 Vue 3.x新增通信方式7.通过ref加原创 2021-08-18 15:41:44 · 262 阅读 · 0 评论 -
React和Vue的区别
这是一个求同存异的过程!先看图分析共同点:1.数据驱动视图在以前的时候我们频繁的使用dom改变视图,这不利于页面的优化;而Vue和React解决了这个痛处,采用了数据驱动视图的方式。2、组件化React和Vue都遵循组件化的思想,组件之间组合嵌套就形成了最后的网页页面。3、Virtual DOMVue 和 React都采用了Virtual Dom + Diff的算法,不管是Vue的Template模板 + options api的写法,还是react的class或者function原创 2021-08-18 15:41:23 · 174 阅读 · 0 评论 -
vue中watch和computed的区别
计算属性computed1、支持缓存,只有依赖数据发生改变,才会进行重新计算。2、不支持异步操作,当computed内有异步操作时无效,无法监听数据的变化。3、computed属性会默认走缓存,计算属性是基于他们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。4、如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 5、如果computed属性属性值是函数,那么默认会走get方法,函数的返回原创 2021-05-13 15:48:31 · 163 阅读 · 0 评论 -
v-if和v-show的区别和用法
vue中的v-show和v-if是做什么用的,两者区别是什么1、v-show和v-if都是做条件隐藏跟显示用的。2、v-show是页面加载的时候显示的内容跟隐藏的内容同时加载在页面上只是根据条件进行隐藏。3、v-if是页面加载的时候根据条件进行显示需要的内容。并销毁不需要显示的条件内容,没加加载的时候进行销毁不符合条件的内容。4、高频的切换下使用 v-show 低频的条件下 使用 v-if也可...原创 2021-05-07 18:03:07 · 1244 阅读 · 0 评论 -
Vue双向绑定的实现原理
1、Vue2.0/3.0双向绑定的实现原理ES5:Object.defineProperty<!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, ini原创 2021-04-30 11:57:47 · 206 阅读 · 0 评论 -
前端面试-浅谈New vue 之后发生了什么
New Vue源码如下:function Vue(option){ if(progress.env.NODE_ENV !== 'production' && !(this instanceof Vue)){ warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)}initMixin(Vue)export default Vue可以看原创 2021-04-30 11:57:11 · 351 阅读 · 0 评论 -
param和query的区别
1、param和query的区别1.query的参数会在url后面用?链接起来,且参数之间用$$符号链接后在页面的url中。2.params传参不会显示在页面中。3.query像get params像post2、params和query的传参this.$router.push({ name:'father', params:{ keyword:'111' }})this.$router.push({ path:"/father", query:{ keyword:"原创 2021-04-22 12:13:18 · 3561 阅读 · 0 评论 -
vue生命周期
vue生命周期函数简介:vue的实例从创建到到销毁的过程就是生命周期。详细的来说就是从开的创建、初始化数据、编译模板、挂载Dom、渲染 - > 更新、卸载等一系列的过程。1.beforeCreate:实力初始化之后,数据观测 event/wathcer事件配置之前被调用 此时data 没有准备完毕2.created:实例已经创建完毕之后被调用。这个时候的话 数据观测(data observe),属性和方法的运算,wath/event事件的回调。然而这个阶段的挂载还没开始,$el属性依然不可原创 2021-04-22 12:01:47 · 119 阅读 · 0 评论 -
Vuex管理工具
vuex管理工具主要功能1、vuex可以实现vue不同组件之间的状态共享(解决不同组件之间的数据共享)2、可以实现组件里面数据的持久化vuex的几个核心概念State: 定义数据Getters:就像计算属性一样,getter的返回值会跟你局它的依赖被缓存起来,且只有当它的依赖值放生改变的时候才会被重新计算。Mutations:定义方法Actions:action提交的是mutation,而不是直接变更数据状态,action可以包含任意异步操作。Miodules:分割模块1.简单使用方原创 2021-04-07 15:02:26 · 90 阅读 · 0 评论 -
vue3.x中实现Mixin组件功能的复用和实现全局的Mixin的配置
在script中 局部引用var baseMixin = { data(){ return { name:'小明' } }}export default{ mixins:[baeMixin]}自定义一个minxin文件夹,建立一个basemixin.jsvar baseMixin = { data(){ return { name:'小明' } }}export default baseMinin//在 组件中引用.原创 2021-03-30 11:53:15 · 806 阅读 · 0 评论 -
vue中如何引入jquery,eslint为什么频频报错。
最近,我们将 jQuery 完全从 GitHub.com 的前端代码中移除了,这标志着我们数年来逐步移除 jQuery 这个渐进式的过程终于结束了,这对我们来说是一件里程碑式的事件。这篇文章将介绍过去我们是如何依赖上 jQuery 的,随着时间地推移,我们意识到不再需要它,但到最后我们并没有使用另一个库或框架取代它,而是使用标准的浏览器 API 实现了我们所需要的一切。(请仔细阅读 转发自https://www.sohu.com/a/253130742_355140)1.如果你用的是vue codewhy原创 2021-03-29 15:40:26 · 379 阅读 · 0 评论 -
vue各个版本中引入使用element-ui
如何在vue中正确引入elementUI1.如何你使用的2.x用一下方法即可引入 - > (main.js)npm i element-ui -S 安装依赖包官网:https://element.eleme.cn/#/zh-CN/component/installationmain.jsimport Element from "element-ui";import "element-ui/lib/theme-chalk/index.css"; Vue.use(Element)原创 2021-03-18 17:00:00 · 2592 阅读 · 0 评论 -
vue3.0自定义组件使用v-model双向绑定
当我们抽离出来一个 input 搜索栏目的时候 需要在父组件双向绑定数据 .那我们该如何办哪?3.0vue有这个办法可以帮我实现1、父组件Father.vue <Input @send="getChildren" v-model:keyword="keyword"></Input >data() { return { keyword:'' } },2、子组件Input.vue <input type="text原创 2021-03-18 13:56:51 · 1182 阅读 · 0 评论