vue知识汇总

vue考点

Vue面试中,经常会被问到的面试题/Vue知识点整理 - SegmentFault 思否

vue的双向绑定原理及实现(依赖收集实现)

Vue.js数据双向绑定实现 - 简书

compile解析模板添加watcher(给数据对象添加监听事件),watcher实例化过程中,触发observe(产生subs数据数组,get添加sub,set调用sub的notify方法【实际来自watch的update方法】)

observe函数defindpropety,get添加订阅,set更新值并出发notify

compile函数解析模板,在节点类型为元素时,遇到v-model就给input通过addeventlistener添加监听将值赋给vm,当时文本节点时,通过怎则取vm中取值返回,给元素和文本节点添加watcher订阅者

Watcher函数 实例化时(watcher初始化设置值是触发observe)往属性订阅器(dep)里面添加自己,触发notify时可以更新vm的数据

vue的diff算法

http://t.csdn.cn/Rfk4g

vue中是如何监听数组变化?

vue中是如何监听数组变化?_xm2by的博客-CSDN博客_vue监听数组变化

就是重写了原生push等数组方法

支持__proto__和不支持两种情况,如果浏览器支持__proto__,则直接将当前数据的原型__proto__指向重写后的数组方法对象arrayMethods,如果浏览器不支持__proto__,则直接将arrayMethods上重写的方法直接定义到当前数据对象上;

eventBus

Vue组件通信中eventBus的使用 - SegmentFault 思否

vuex

vuex_juse__we的博客-CSDN博客

可以直接用this.$store.state读取数据

为什么要使用vuex而不是window.obj来维护全局的实例属性和方法呢

1. vuex除了提供全局变量

2. 抽象业务逻辑,减少重复代码;比如异步获取的数据,不需要每个地方都写请求接口的代码,只需要store.dispatch('actionName')

3. 统一数据来源;一个数据可能来自:1.服务端 2.web socket的推送 3.响应用户操作之后对数据执行的运算符操作;没有使用vuex,你要在不同的地方写这三种其一的获取/修改数据的代码,而使用vuex只需要一句store.dispatch('actionName')要不要使用vuex

4. 便于devtool追踪调试vuex

【vue】为什么要使用vuex而不是window.obj来维护全局的实例属性和方法呢 - SegmentFault 思否

eventBus和vuex的区别

EventBus & Vuex?_weixin_34228617的博客-CSDN博客

eventbus是vue的实例,emit,on多了以后不好管理业务逻辑

vuex太大,小项目用起来不方便

slot插槽

vue中的slot与slot-scope_juse__we的博客-CSDN博客

组件

vue自定义组件_juse__we的博客-CSDN博客

指令

vue自定义指令_juse__we的博客-CSDN博客

vue渲染函数render的使用

vue渲染函数render的使用 - 没文化不开心的个人空间 - OSCHINA - 中文开源技术交流社区

vue修饰符

vue 各大修饰符(逐步更新)_juse__we的博客-CSDN博客

Vue 修饰符_DreamFive的博客-CSDN博客

vue-router

vue $route及$router的区分_juse__we的博客-CSDN博客

前端路由简介以及vue-router实现原理

前端路由简介以及vue-router实现原理 - muwoo - 博客园

hash

后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发hashchange 这个事件

history 模式

14年后,因为HTML5标准发布。多了两个 API,pushState 和 replaceState,通过这两个 API 可以改变 url 地址且不会发送请求同时还有popstate 事件。通过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了 HTML5 的实现,单页路由的 url 就不会多出一个#,变得更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面

vue中watch,compute,methods的比较

watch,compute,methods的比较_juse__we的博客-CSDN博客

vue如何实现渲染页面,渲染过程以及原理

Vue是如何渲染页面的,渲染过程以及原理代码 - 小易的博客 - 博客园

vue渲染函数render的使用

vue渲染函数render的使用 - 没文化不开心的个人空间 - OSCHINA - 中文开源技术交流社区

vue父子组件中的生命周期与钩子函数的调用顺序(渲染顺序)

Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序_古兮!怪哉的博客-CSDN博客_vue父子组件的生命周期顺序

vue动态加载组件

vue动态加载组件_juse__we的博客-CSDN博客_vue 动态加载组件

uniapp使用 Vue.js 开发跨平台应用的前端框架

uni-app官网

浅谈Vue.use

浅谈Vue.use_juse__we的博客-CSDN博客

关于Vue.prototype 和vue.use()的疑问

关于Vue.prototype 和vue.use()的疑问 - SegmentFault 思否

Vue中keep-alive的使用及详解

vue中keep-alive的使用及详解_半度℃温热的博客-CSDN博客_keep-alive

 原理:在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

Vue 属性验证

Vue 属性验证_진 찬的博客-CSDN博客_vue 属性验证

为什么用虚拟dom

详解Vue中的虚拟DOM - Fundebug - 博客园

缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。

vue中key的作用和工作原理

vue中key的作用和工作原理 - whkl梅 - 博客园

所以key值是在DOM树进行diff算法时候发挥作用。一个是用来判断新旧Vnode是否为同一个,从而进行下一步的比较以及渲染。另外一个作用就是判断组件是否可以复用,是否需要重新渲染。

vue高级api

vue高级用法_弹琴弹琴的博客-CSDN博客_vue 高级写法

Vue高级API - mixins(含案例)

Vue高级API - mixins(含案例) - 简书

vue2和vue3的区别

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值