一、vue20的双向绑定是怎么实现的
2、observer，compile，watcher
（1）observe是一个数据监听器，核心方法是ObjectdefineProperty
（3）compile是一个指令解析器，对需要监听的节点和属性进行扫描和解析。
3、此模式的优点：不需要显式调用，可以直接通知变化，更新视图；劫持了属性setter，不需要额外的diff *** 作
4、ObjectdefineProperty缺点
（1）不能监听数组
（2）不能监听整个对象，只能监听属性
（3）不能监听属性的增删，只能监听变化
5、30版本使用Proxy
（1）可以监听数组
（2）可直接监听整个对象，不用层层递归属性
（3）get和set时候直接有参数，不需要单独存储变量
（4）new Proxy()会返回一个新对象，不会污染源对象。
二、数据不更新的问题
1、更新的原理：在数据读取时收集依赖，在赋值时通知依赖更新。
2、object有defineProperty方法，通过getter，setter只监听了属性的读取和赋值，但是新增属性和删除属性没有检测，所以专门提供了$set和$delete来实现
3、array，没有defineProperty方法，没有setter，通过get和新建数组方法拦截器修改原生方法push,pop,shift,unshift,splice,sort,reserve来实现监听，而通过修改数组下标 *** 作数组的不会被检测，所以专门提供了$set和$delete来实现
4、$set(target, key, value)和$delete(target, propertyName/index)方法原理
（1）判断target是否是undefined，null，或者原始类型,或者vue实例，或者vue实例的跟数据对象
（2）target为数组，则还是通过调用splice *** 作索引更新数据
（3）target为对象，且为响应式，则调用defineReactive *** 作数据
（4）更新完数据后通知依赖更新
三、computed和watch和methods
1、computed
（1）设计初衷：为了使模板中的逻辑运算更简单
（2）适用于数据被重复使用或者计算复杂费时的场景；依赖其他数据的场景
（3）读取缓存，依赖不变，则不需重新计算。（根据dirty标志判断）
2、watch是对数据的监听回调
3、computed和watch的区别
相同点：都会观察页面的数据变化
不同点：（1）computed是读取缓存，watch每次都要重新执行；
（2）watch更适合数据变化时的异步 *** 作和开销较大的 *** 作。
4、computed和methods的区别
computed依赖缓存，可以定义getter和setter，但是methods不行
四、vue-router的模式区别
1、abstract：非浏览器环境下使用
2、hash：
（1）默认。监听hashchange实现。
（2）有点，兼容性好，ie8支持
（3）缺点：看起来奇怪
3、history：
（1）h5新增的。允许开发者直接修改前端路由而不重新触发请求页面
（2）实现原理：监听popstate事件。能监听到用户点击浏览器的前进后退事件或者手动调用go，back，forward事件；不能监听到pushState和replaceState事件。
（3）为了避免浏览器刷新出现的404页面，需要在服务端配置兼容。
（4）如果浏览器不支持，会降级到hash模式
通过vueuse插件机制和vuemixin将store在beforeCreate和destroyed生命周期进行混入。
五、vuex解决了什么问题
1、vuex解决了vue项目中的数据状态管理问题
2、是组件通信的一种方式。
3、原理：创建了单一的状态树，包含state，mutation，action，getter，module。
4、view(dispatch)action(commit)mutation(mutate)state(render)view
5、通过vue的data和computed，让state变成响应式，
6、通过vueuse插件机制和vuemixin将store在beforeCreate生命周期进行混入。
六、nextTick是怎么是实现的
1、作用：将回调延迟到下次DOM更新循环之后执行
2、原因：VUE在更新DOM时是异步的，vue检测到数据变化后，不会立即更新DOM，而是会开启一个事件队列，并缓冲同一时间循环中的所有数据变更，在下一次tick中，执行更新DOM。
3、js的运行机制：js是单线程的，基于事件循环，有宏任务和微任务。
4、内部原理：
（1）能力检测：Promisethen(微), MutationObserve(微)，setImmediate(微),setTimeout(宏)
（2）将回调函数推入回调队列，锁上易步锁，执行回调。
七、keep-alive内置组件和LRU算法（队列）
1、自身不会渲染成DOM，没有常规的 标签，是个函数组件，被他包裹的组件，切换时会被缓存在内存中，而不是销毁。
（1）可以有条件的缓存:include（匹配到的缓存）,exclude（匹配到的不缓存）,max(最多可以缓存多少组件实例)
2、原理：内部维护了thiscache（缓存的组件对象）和thiskeys（thiscache中的key），运用LRU策略。
（1）命中了缓存的组件要调整组件key的顺序。
（2）缓存的组件数量如果超过thismax时，要删除第一个缓存组件。
（3）LRU(Least recently used，最近最少使用)：根据数据的 历史 访问记录来进行淘汰数据。“如果数据最近被访问过，那么将来被访问的几率也更高。”
3、生命周期钩子：activated和deactivated，被keep-alive包括的组件激活和停用时调用。先停用组件的deactivated，再激活组件的activated
转： >
声明子组件数据接口，该接口在父组件调用时 可直接赋值
props:{
taaa:{
//组件默认值
default:"sdfsdf",
//组件限制类型
type:String,
//是否必填
required:false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block;}
</style>
</head>
<body>
<div>
<a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href=">
Vuex是vue官方的一款状态管理工具，什么是状态呢？我们在前端开发中有一个概念：数据驱动，页面中任意的显示不同，都应该有一条数据来控制，而这条数据又叫做state，状态。
在vue中。组件间进行数据传递、通信很频繁，而父子组件和非父子组件的通信功能也比较完善，但是，唯一困难的就是多组件间的数据共享，这个问题由vuex来处理
vue提供的一个全局的状态管理工具，主要处理项目中多组件间状态共享
因为在组件中可以通过this storestate来使用state中管理的数据
但是我们发现，这样使用的话，当state的数据更改的时候，vue组件并不会重新渲染
也就是说，如果想要在组件中响应式的使用的时候，我们需要通过计算属性（computed）来使用
这样的写法很无趣，而且如果使用的状态较多会产生冗余的感觉，所以vuex提供了mapState辅助函数，帮助我们在组件中获取并使用vuex的store中保存的状态
所以我们可以这样写：
但是如果组件中已经有了num这个数据了，而state中的数据名字也叫num就会照成冲突，这个时候我们可以在组件使用state的时候，给状态起个别名：
但是，有的时候我们在组件中还有自己的业务逻辑需要用到计算属性：
有的时候，我们需要根据state中的某一个状态派生出一个新的状态，例如，我们state中有一个num，在某些组件中需要用到是num的二倍的一个状态，我们就可以通过getters来创建
创建了之后，在组件中通过this$storegettersdoubleNum来获取里面的数据
当然vuex也提供了mapGetters辅助函数来帮助我们在组件中使用getters里的状态，且，使用的方法和mapState一模一样
我们不能直接在组件中更改state：this$storestatenum=2,而是需要使用mutations来更改，mutations也是一个纯对象，里面包含很多更改state 的方法，这些方法的形参接收到state，在函数体里更改，这时，组件用到的数据也会更改，实现响应式。
但是我们也不能直接调用mutations 的方法，需要使用this$storecommit来调用，第一个参数为调用的方法名，第二げ参数为传递参数
vuex提供了mapMutations方法来帮助我们在组件中调用mutations 的方法,使用方法和mapState、mapGetters一样
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步 *** 作。
也就是说，如果有这样的需求：在一个异步处理之后，更改状态，我们在组件中应该先调用actions，来进行异步动作，然后由actions调用mutation来更改数据
如上，actions的方法中可以进行异步的动作，且形参会接收store，从中取出commit方法用以调用mutations的方法
在组件中通过this$storedispatch方法调用actions的方法
当然也可以使用mapMutations来辅助使用
组件使用数据且通过异步动作更改数据的一系列事情：
1生成store,设置state
2在根实例中注入store
3组件通过计算属性或者mapState来使用状态
4用户产生 *** 作，调用actions的方法，然后进行异步动作
5异步动作之后，通过commit调用mutations的方法
6mutations方法被调用后，更改state
7state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态
8组件状态被更改创建新的虚拟dom
9组件的模板更新之后重新渲染在dom中
vuex的使用：
目前市场上有两种使用vuex的情况，
第一种：将需要共享、需要管理的状态放入vuex中管理，也就是说在必要时使用
第二种：将所有的数据都交由vuex管理，由vuex来承担更多的责任，组件变得更轻量级，视图层更轻
在实现回到顶部功能的时候，我们写了一个backTop组件，接下来需要通过监听windowscroll事件来控制这个组件显示隐藏
写了一个v-back-top指令，就是将回到顶部功能做成一个指令，哪个组件或者dom需要使用到回到顶部，就加上这个指令就可以，设置不同的参数来控制在不同的情况下触发
组件库就是通用组件的集合
pc：element-ui iview
mobile： mint-ui
当我们在使用一些插件的时候，经常需要在dom更新完成后进行必要 *** 作，但是在vue中提供的api只有updated钩子函数，而在这个函数里，任意数据的变化导致的dom更新完成都会触发，所以很可能会造成无关数据的影响，而使用监听的话只能监听到数据的变化，此时dom还没有更新，我们只能强行使用setTimeout来处理
这里推荐大家使用nextTick全局方法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
v-for='n in 10' n会打印1-10
通用：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed
路由守卫：beforeRouteEnter/beforeRouteUpdate (22 新增)/beforeRouteLeave
v-if是真正的条件渲染，会确保在切换中条件块内的事件监听、子组件都会适当的被销毁和重建
v-show总是将节点渲染在dom中，只是基于css：display来控制节点的显示和隐藏
v-if有更高的切换开始，v-show有更高的初始渲染开销
v-if是惰性的，初始条件为假，就不会渲染
axios请求的时候不会带上cookie，不会影响带宽，可以通过withCredentials：true来设置
对axios 的请求头进行设置：
axiosdefaultsheaders = {'Content-Type':''}
vue20不在更新维护vue-resource，官方推荐使用axios
6为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vuejs 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。
全局：Vuecomponent(name,Vueextend({}))
局部：{ components:{name:Vueextend({})} }
假设我们有一个数据为num，还希望拥有一个数据为doublenum，而且希望doublenum的值永远都是num的二倍
方法：
prop是单向绑定的，父组件属性变化，传递给子组件，但是，子组件数据变化，不能直接传递给父组件，也就是数据的流行是从父组件流向子组件的，为了防止子组件修改父组件的数据（会让应用的数据流变的更难开发、更新、维护）
使用了vuex工具的时候，store中数据在组件中使用的过程也是单向数据流，state->vue component->actions->mutations->state->vue component
当数据改变之后，vue会创建新的虚拟dom来和原来的虚拟dom做对比，在创建新的虚拟的dom的时候，会根据key来查找在原来的虚拟dom中有没有某个部分，如果原来的有，这次的也需要，就会实现复用，而且在做diff对比的时候，如果有key会加快对比的查找速度，提高性能
尽量循环的时候不要将key设置为数组的索引，因为当删除某一个元素的时候，就会导致删除位置下面的所有元素的key值都与上一次虚拟dom的key值不同，导致复用失败，这个时候我们最好使用关键的唯一的，例如id这样的数据作为key
如果数据变化只是值的变化而不是条数和位置的变化，可以使用索引作为key
Vueuse会查找插件对象里的install方法去执行,并且给install方法里传入Vue对象
很多情况下，一个应用会有PC和移动端两个版本，而这两个版本因为差别大，内容多，所以不能用响应式开发但是单独开发，而域名只有一个，用户进入域后直接返回对应设备的应用，做法主要有两种：
内容简介：
1）Vue指令
2）computed和watch
3）生命周期钩子
4）组件间的传参
5）插槽
6）修饰符
7）nextTick()
前端三大框架：
Vue：尤雨溪开发
React：Facebook主导开发
Angular：谷歌主导开发
为什么选择Vue
1国内Vue的市场份额占比多
2简单易上手，非常适合前端开发初学者学习
前置知识：
1HTML、CSS和JS基础
2了解Node和npm
3webpack（可选，vue-cli已经封装了打包功能）
使用Vue的两种方式：
1直接script标签引入vuejs文件
2基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）
前端框架与库的区别
• jquery 库 -> DOM( *** 作DOM) + 动画+ ajax请求
• 框架 -> 全方位功能
一、指令
指令（Directives）是带有 v- 前缀的特殊属性。
插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。
v-model也可用在自定义组件上。
5v-for（列表渲染）
使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1 利用索引直接设置数组的某一项 2 对象属性的添加或删除
二、computed和watch
三、生命周期钩子
什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。
1）beforeCreate
此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。
2）created
此时可以读取data的值，并可以对其进行 *** 作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。
在这个钩子函数中，我们可以进行>
以上就是关于vue原理相关总结全部的内容，包括:vue原理相关总结、vue 实现单选/多选效果、求助，VUE循环引用组件，传值问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）