Vue 组件 data 为什么必须是函数?
- 1.data 是一个函数,这样每复用一次组件,就会返回一份新的data,类似于一个私有的数据空间,让各个组件实例维护各自的数据。
- 2.对象的形式,就使得所有组件实例共用了一个数据源,会造成一个问题,其中一个变化全都变化的结果。
自定义指令
- 1.全局注册
Vue.directive('focus',{
//当被绑定的元素插入到 DOM 中时...
inserted:function(el){
//聚焦元素
el.focus()
}
}
- 2.局部注册
directives:{
focus:{
//指令定义
inserted:function(el){
el.focus()
}
}
}
nextTick 的作用
- 1.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
$route 和 $router 的区别
- $router 为 VueRouter 实例。想要导航到不同 URL,则使用 $router.push 方法
- $route 为当前 router 跳转对象里面可以获取 name、path、query、params 等
vue-cli生成的项目文件夹assets和public(static) 的区别
- 相同点:assets和public都是存放静态资源的文件。项目所需要的静态文件、图片、样式、文件都可以放在这两个文件夹下
- 不同点:在 assets中存放的静态资源,在项目打包时会将这些静态资源与代码、index.html文件一起一同进行打包压缩,上传到服务器
- 在public(static) 中存放的静态资源,不会被打包压缩格式化等流程,而是直接进入打包好的目录,直接上传到服务器。
DOM渲染在哪个周期中已经完成
在mounted 中
Virtual DOM (虚拟Dom是什么)
- 是一颗以 JavaScript对象(VNode节点)作为基础的树,用对象属性来描述节点,实际上它是一层对真实DOM的抽象。最终可以通过一系列操作使这课树映射到真实的DOM上。
<ul id='list'>
<li class='item'>Item1 1</li>
<li class='item'>Item2 1</li>
<li class='item'>Item3 1</li>
</ul>
// 虚拟DOM
var element = {
tagName:'ul',// 节点标签名
props:{// DOM的属性,用一个对象存储键值对
id:'list'
},
children:[ // 该节点的子节点
{tagName:'li',props: {class:'item'},children:["Item1"]},
{tagName:'li',props:{class:'item'},children:["Item2"]},
{tagName:'li',props:{class:'item'},children:['Item3']}
]
}
为何需要Virtual DOM?
- 具备
跨平台的优势
:由于 Virtual DOM 是以 JavaScript 对象为基础
而不依赖真实平台环境,所以使他具有了跨平台
的能力,比如说浏览器平台
、Weex
、Node
等。 - Virtual DOM
本质
上就是在JS
和DOM
之间做了一个缓存
。js只操作内存(虚拟DOM) ,最后的时候再把变更
写入(DOM) 提升渲染性能
, 虚拟DOM 的优势不在于单次的操作
,而是在大量、频繁
的数据更新下,能够对视图进行合理、高效的更新
。
Virtual DOM 的diff算法
虚拟dom
因为是纯粹的JS对象
,所以操作它会很高效
,但是 Virtual DOM 的变更
最终转换成DOM操作
,为了实现高效的DOM
操作,一套高效的虚拟DOMdiff 算法
显的很有必要。
包括以下几个步骤:
- 用
JS对象
结构表示DOM树
的结构,然后用这个树构建一个真正的DOM树,插到文档中。 - 当状态变更的时候,
重新构造一颗新的对象树
。然后用新的树
和旧的树
进行比较(diff),记录两棵树的差异
。注意:diff算法是通过同层的树节点进行比较
而非对 树进行逐层搜索遍历
的方式,是一种相当高效
的算法。
如何让css只在当前组件中起作用?
将当前组件的
MVVM模型
- 是一种
架构模式
,Model-View-ViewModel
- 把传统的
MVC
模式中的Controlle
r演变成ViewModel
. - Model层代表
数据模型
- View代表
UI组件
- ViewModel是View和Model 沟通的
桥梁
,数据会绑定到
viewModel层并自动将数据渲染
到页面中
,视图变化
的时候会通知ViewModel层
更新数据。
单向数据流
和双向数据流
单向数据流方
式 使用一个上传数据流
和一个下传数据流
进行单向数据通信,两个数据流之间相互独立
。只能从一个方向
来修改状态。vuex(组件data->action->state-组件data)双向数据
流(也叫双向绑定)。在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态,用户的操作(如在输入框中输入内容) 也可以修改状态。- 这使改变一个状态有可能会触发一连串的状态的变化,最后很难预测最终的状态是什么样的,使得代码变得很难调试。
MVC
的理解
- model(模型)-视图(view)-控制器(controller) 的缩写,一种软件
设计典范
- 目的是将M和V的代码分离,从而使同一个程序可以使用不同的表现形式。分别对应 Html、css、js
vue3.x响应式数据原理
- 改用
Proxy
替代 Object.defineProperty。proxy可以直接监听对象
和数组
的变化,并且有很多种拦截方法
。作为新标准将受到浏览器厂商重点持续的性能优化。 - proxy只会代理对象的第一层,那么vue3是怎样处理这个问题的呢?
- 判断当前
Reflect.get的返回值
是否为Object.如果是 则再通过reactive方法做代理
,实现深度观测
。
监测数组的时候可能会触发多次get/set
,如何防止触发多次呢
判断key
是否为当前被代理对象target自身属性,也可以判断旧值与新值是否相等
,只有满足以上两个条件之一时,才有可能执行trigger
.
vue2.x中如何监测数组变化的?
- 使用了
函数劫持
的方式,重写了数组的方法
,Vue将data中的数组进行了原型链重写(push,pop,shift,unshift,splice,),指向了自己定义的数组原型方法
。当调用数组api时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历
进行监控。
computed
和watch
- computed 本质是一个
具备缓存
的 watch,依赖的属性发生变化就会更新视图。适用场景 计算比较消耗性能的计算场景。当表达式过于复杂时,可以将复杂的逻辑放入计算属性中处理。 - watch
没有缓存
,更多的是观察
的作用,可以监听某些数据执行回调
。当我们需要深度监听对象中的属性时,可以打开deep:true
选项,这样便会对 对象中的每一项进行监听。此时,会带来性能问题,优化可以使用 字符串形式监听。
虚拟Dom
以及key
属性的作用
- 在浏览器中操作DOM是很耗费性能的,频繁的操作DOM,会造成很大的性能负担。虚拟DOM 可以解决这个问题
- vue2的Virtual DOM借鉴了开源库 snabbdom的实现。
- 本质是用一个
原生的js对象去描述一个dom节点
。是对真实DOM的一层抽象。 映射
到真实DOM要经历 VNode的create
、diff
、patch
等阶段- key的作用是尽可能的
复用 DOM元素
- 新 旧 children 中的节点
只有顺序是不同
的时候,最佳的操作应该是通过移动元素的位置来达到更新的目的。 - 需要在新旧 children 的节点中保存映射关系,以便能够在旧 children 的节点中找到可以复用的节点。key也就是 children中节点的唯一标识。
vue中组件生命周期调用顺序
- 组件的调用顺序都是
先父后子
渲染完成的顺序是先子后父
。 - 组件的销毁操作是
先父后子
销毁完成的顺序是先子后父
。
组件设计应遵循的原则
就近管理
- 单文件开发
- 依赖的静态资源放在统计目录
- 相关联组件也放在同级目录
高复用性
- 页面级别的复用(基础组件)
- 项目级别的复用-私有组件库(业务组件)
- 公司级别的复用-开源组件库(element-ui)
分层设计
- 分为四层:展示层、业务层、持久层、数据库层
灵活扩展
- 考虑扩展性,除了提供丰富的props还要提供 slot 插槽来完成用户的定制化需求。或提供可利用 render函数动态渲染的功能。
在vue中实现防止模板渲染时闪烁的方法
[v-cloak]{display:none}
{{}}
###### 对template编译的理解? – 通过compile编译器把template先转化成AST(抽象语法树)树,createCompile的返回值是compile,是用来创建编译器的。在得到 render函数返回 VNode。 – compile还负责合并 option – AST经过 generate得到 render函数,render的返回值是 VNode,也就是虚拟DOM节点,有标签名、子节点、文本等等。 ###### vue.extend和vue.component – 后者会注册一个全局的组件,其会自动判断第二个传进来的是 Vue继承对象还是普通对象 – 前者返回的是一个扩展实例构造器。主要服务于 后者的。
vue的计算属性
- 当模板中放入太多的逻辑,难以维护,且多次使用的情况下,尽量采取计算属性的方式。
- 使数据处理结构更清晰
- 依赖于数据,数据更新,处理结果自动更新
- 计算属性内部this指向vm实例;
- 在template调用时,直接写计算属性名即可;
- 常用的是getter方法,获取数据,也可以使用set方法改变数据;
- 相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/163322.html