Vue
关注
分享
扫一扫
文章平均质量分 66
听北风
一米八的小哥哥！
展开
-
Vue面试系列之十二：你知道vue双向数据绑定的原理吗？
首先，什么是双向数据绑定？数据变化更新视图，视图变化更新数据，即双向数据绑定；输入框内容变化时，data中的数据同步变化 view=>modeldata中的数据变化时，文本节点的内容同步变化 model=>view设计思想：观察者模式Vue的双向数据绑定的设计思想为观察者模式。Dep对象：Dependency依赖的简写，包含有三个主要属性：id,subs,target和四个主要函数addSub,removeSub,depend,notify，是观察者的依赖集合，负责.原创 2021-08-26 20:20:08 · 563 阅读 · 0 评论 -
Vue面试系列之十一：vue生命周期的理解
我们先来看一下vue官网提供的vue实例生命周期图示：官网提供的图上很详细的描述了一个vue实例的整个生命过程，从创建到销毁，从图上都能很直观的看出来；那么，接下来，我再具体解释一下各个生命周期所做的事情：beforeCreate()-创建前：data和methods的数据还未初始化；created()-创建后：添加观察者，data的数据可以访问，methods的方法也可以调用，请求数据是异步的，宜早不宜迟； 此时，到了判断阶段，判断是否有el元素；beforeMount()--挂.原创 2021-08-23 20:18:54 · 181 阅读 · 0 评论 -
Vue面试系列之十：watch和computed的区别以及怎么选用
1. 区别1.1 定义/语义区别watch<input type="test" v-model="foo">var vm=new Vue({ el:"#demo", data:{ foo:1 }, watch:{ foo:function(newVal,oldVal){ console.log(newVal+''+oldVal) } }})vm.foo=2原创 2021-08-22 15:36:50 · 526 阅读 · 0 评论 -
Vue面试系列之九:vue组件之间的通信
vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。首先，组件通信常用方式：props eventbus(事件总线) vuex组件通信props父给子传值// childprops:{msg:String}// parent<Helloworld msg="welcome to Your vue.js App"&原创 2021-08-17 11:35:35 · 316 阅读 · 0 评论 -
Vue面试系列之七：为什么vue组件模板只有一个根元素？
对于这个问题，我们从以下三个方面来考虑：new Vue({el:'#app'}) 单文件组件中，template下的元素div。其实就是“树”状数据结构中的“根” diff算法要求的，源码中，patch.js里patchVnode()首先，实例化Vue时：<body> <div id="app"></div></body><script> var app=new Vue({ el:"#app"原创 2021-08-13 12:44:03 · 2864 阅读 · 0 评论 -
Vue面试系列之六：vue的设计原则
在vue的官网上写着vue的定义与特点：渐进式JavaScript框架 易用、灵活和高效所以，想要阐述此题，那么整体思路应该按照以上两点展开即可；1. 渐进式JavaScript框架：与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，...原创 2021-08-12 14:56:25 · 526 阅读 · 0 评论 -
Vue面试系列之五：谈一谈对vue组件化的理解？
首先，这个问题比较大，对于这种问题，我们可以从多个方面进行分析概括；其次，要注意回答思路，可以从以下几个方面进行阐述：组件化的定义； 组件化的优点； 组件化的使用场景和注意事项等； vue中组件化的一些特点;1. 组件化的定义组件定义:源码位置：src\core\global-api\assets.js组件定义的方式：// 全局组件定义Vue.component('comp'，{ template:'<div>this is a component&l原创 2021-08-11 15:33:13 · 705 阅读 · 0 评论 -
Vue面试系列之四：关于diff算法的理解
在面试中，关于vue中diff算法的问题时常出现，很多人都不知道怎么去回答，那笔者在这里简单总结一下，虽然算不上是很标准的答案，但是对于回答面试官的问题应该足以应对。注意：diff算法并非vue所专有（凡是涉及到虚拟DOM的，多半都要用到diff算法）；那么，接下来，我们从vue源码层面的三个方面进行分析：1. 必要性源码位置：vue/src/core/instance/lifecycle.js-----mountComponent()mountComponent（）方法中，我们就可原创 2021-08-10 17:52:13 · 1363 阅读 · 0 评论 -
Vue面试系列之三：v-key的作用
v-key指令的作用，可以说是面试中比较常见的问题了，那么现在我们来简单了解下。1. v-key的使用场景我们先来看一段代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2021-08-08 18:40:23 · 2803 阅读 · 0 评论 -
Vue面试系列之二：vue组件中data为什么是个函数？
1. 问题分析对于这个问题，大多数人可能都有所注意，但是却没有过多的在意，那么接下来我就来简单分析一下，希望各位读者能够有所收获。首先，我们来分析一下这个data：在我们初次接触vue的时候，我们大多都是在页面中引入vue.js，然后在页面中直接创建一个Vue根实例，代码如下：<html><body> <div id='demon'> <h1>{{msg}}</h1> </div>&原创 2021-08-06 20:20:33 · 302 阅读 · 0 评论 -
Vue面试系列之一：v-if和v-for的优先级
自从学完vue之后，我又相继接触了两个vue项目，期间深感自身不足，所以多方学习（技术文章或者相关视频等），也有所收获，特来写此系列文章，一是为了巩固自身学习，二是为了供还有所惑之人参考借鉴，如果文章正好能够解你所惑，那我深感慰藉。之所以称为面试系列，是因为这些关于vue的知识点皆是面试中能够用到的，就算面试中不提，对于加深vue的某方面的理解也是有一定作用的，言虽如此，全凭个人水平高低。若有大神路过，且文章有不正之处，亦或对此有不同见解者，皆可指正提点，笔者必大感欣喜。...原创 2021-08-05 18:02:51 · 1665 阅读 · 0 评论