weixin_43912756的博客

Vue和React的几点区别1.Vue支持双向绑定，组件与DOM之间通过v-model实现双向绑定React是单向数据流2.Vue通过mixins组合不同功能React通过HoC(高阶组件)来组合不同功能3.Vue通过setter、getter或函数的劫持来知道数据的变化,Vue使用的是可变的数据React默认通过比较引用的方式(diff)，React强调数据的不变性4.Vue中组件通信：(1) 父传子：props传递数据或回调 (2)子传父：Event (3)父传子跨越多个层级：p

参考：vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()1、 vue异步组件技术通过vue-router配置路由，使用vue的异步组件技术，实现按需加载，但是这种情况下，一个组件会生成一个js文件。{ path: '/promisedemo', name:'PromiseDemo', component: resolve => require(['../components

参考：vue单页面应用刷新网页后vuex的state数据丢失的解决方案1、产生原因ans : Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex的存储的数据相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态 。store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里的数据就会被重新赋值。2、 解决思路ans：将stat

1、购物车模块包括哪些组件nav-bar（展示“购物车”），CartList组件(包括购物车列表)，其中子组件包括scroll组件和CartListItem组件。在CartList组件中通过v-for遍历cartlist变量，通过props将每个商品对象Item传值给子组件CartListItem...

1、详情页面包括哪些模块：nav-bar组件(可复用) scroll组件(引入用于滚动的插件) ，底部加入购物车组件DetailBottomBar，还有四大部分：商品、参数、评论、推荐。商品部分：DetailSwiper(包括商品详情图片的轮播展示) DetailBaseInfo组件(包括商品的名字、价格、折扣，提供的一些服务等) DetailShopInfo(包括店名、一些评价指标等等) 参数部分：DetailItemParams(通过表格来实现，包括商品的尺码信息 ) 评论部分：DetailCo

参考：axios在vue-cli项目中的封装使用Axios中文说明1、为什么要在vue-cli中使用axios？因为它可以实现：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求拦截请求和响应转换请求数据和响应数据支持 Promise API客户端支持防止CSRF提供了一些并发请求的接口轻量，体积小2、我如何使用的？（1）封装、配置axios在src下新建一个文件夹network专门用来存放接口相关的文件和配置在request.js中

1、概述路由路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源实现原理：检测url的变化，截获url地址，然后解析来匹配路由规则2、hash模式其底层源码，主要是通过添加url的hash变化的监听器来实现，通过hashchange事件的触发知道hash值发生了哪些变化，通过transitionTo匹配路由，并通过路由配置，跳转到新的视图组件。当浏览器历史返回或者直接输入链接跳转时，会触发hashchange事件；刷新页面时不会触发hashchange，会用load

1、生命周期beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用created:实例创建完成之后立马触发的钩子函数。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。在beforeCreate之后开始监听data数据变化情况。beforeMount:在created之后，开始编译模板，将data里的数据和vue语法写的模板编译成html;开始挂.

如何使用Vuex中state里的数据参考：vuex的state中的数据的四种使用方法存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，data遵循什么规则？类型：Object | Function，组件的定义只接受 functionVue会递归的将data中的property转换为getter/setter，从而让data的property能够响应数据变化var vm = new Vue({ data: {a : 1}) ,可以通过vm.$data访问原始数据对象。V

参考：vue通信、传值的多种方式（详细）Vue组件通信中eventBus的使用vue通信及组件之间传值1、通过路由带参数进行传值两个组件 A和B,A组件通过query把orderId传递给B组件：this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B在B组件中获取A组件传递过来的参数：this.$route.query.orderId2、通过设置 Session Storage缓存的形式进行传递

参考：首页白屏优化实践首页白屏的引发的思考(一)Vue React Angular这三大框架都是JS驱动，单页面的应用的html是靠js生成，首屏需要加载很大的js文件，在JS没有解析加载完成之前页面无法展示，会处于长时间的白屏。以Vue来说，在应用启动时，Vue会对组件中的data和computed中状态值通过Object.defineProperty方法转换成get和set访问属性，以便对数据变化进行监听。而这一过程都是在启动应用时完成的，这也势必导致页面启动阶段比非 JS 驱动（比如 jQuer

无论是vue还是react，其内部都是通过虚拟DOM机制来更新浏览器中真实的DOM。以 ul > li *5 为例，从上至下点击每个li进行删除操作；diff算法将newVDom与oldVDom进行比较，找到key值相同的li标签，并进行自上而下的逐一对比。原本我们每次点击只需要逐个删除列表中的第一个li节点，**若采用index作为key值，导致每次点击事件发生后，新产生的newVDOM中li的key被动态的赋值，导致对比错位，使得diff以为每个li都发生了改变，**所以每次删除一个li，页面

就地复用策略vue在进行列表渲染的时候，会默认遵守就地复用策略：直接对已有的标签进行复用，不会整个的将所有的标签重新删除和创建，只会重新渲染数据，然后再创建新的元素，直到数据渲染完成。keykey属性可以用来提升v-for渲染的效率，使用v-for的时候，vue需要给每个元素添加一个key属性，这个key属性是唯一的，可以避免数据混乱的情况出现，vue对列表进行渲染的时候，就不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去...

1、首先我这个购物车模块实现了什么功能？展示商品的名称、单价和数量具有选择功能，可以选择或者取消选中，可以全选或者取消全选，可以只计算选中的商品的总价，以及确定是否选中商品2、逻辑整理vue实例定义一个数组cartList来存放商品信息，...

参考：computed和watch的区别1、watch: 一个数据影响多个数据2、computed:一个数据受多个数据影响3、watch computed methods区别（1）watch computed以Vue的依赖追踪机制为基础，只要依赖数据发生变化，所有依赖这个数据的“相关”数据会“自动”发生变化，即自动调用相关函数去实现数据的变动（2）methods里定义的函数需要手动调用才能执行4、举例说明new Vue({ el: '#app', // 设置两个button，点击分别调

1、如何实现双向绑定？以用户提交表单为例，其原理是我们对input进行value的属性绑定(v-bind：value="…"),将Model中的变量绑定到View上(Model -> View)，以及当用户对input进行操作时，进行事件监听(v-on: input =" … ")，从而实现双向数据绑定。v-model实际上是语法糖，结合了上述两个操作。2、底层原理是什么？参考：Vue的MVVM是如何实现的vue实现数据双向绑定主要是采用数据劫持，配合发布-订阅者模式的方式，通过Object.

参考：彻底搞懂路由跳转：location 和 history 接口1、BOM对象BOM（浏览器对象模型）中几个比较重要的对象：window，location,navigatorwindow: BOM的核心对象，既是通过javascript访问浏览器窗口的一个接口，优势ECMAScript中规定的Global对象loaction: 最有用的BOM对象之一，且比较特殊的是，locaton既是window对象的属性，也是document对象的属性，换句话说，window.location和documen

参考：Vue.js框架是什么，为什么选择它?MVVM框架主要有三个：Vue, React, Angular当在Model层中修改了数据，View视图层也会相应的进行更新，而这整个过程就是由ViewModel来操作的，不用再手动操作DOM了1、Vue的优点更轻量更快更容易上手，易学2、Vue的两大核心首先，Vue的官方介绍：通过尽可能简单的API实现响应的数据绑定和视图组件。（1）数据绑定Vue的数据改变会驱动视图的自动更新，即MVVM思想的实现（2）视图组件把整个网页拆分成一个个

参考：深入理解react中的虚拟DOM、diff算法面试官：你了解 vue 的diff算法吗？DOM树上的结构信息我们都可以用Javascript对象很容易的表示出来，只需记录一个DOM结点的节点类型、属性、子节点。1、虚拟DOM操作步骤如下：用javascript对象来表示DOM树的结构，然后用这个树构建一颗真正的DOM树，插入到文档中当状态变更的时候，再构造一个新的对象树，然后用这个新的树和旧的树做对比，记录树的差异把2所记录的差异应用再步骤1所构建的真正的DOM树上，视图就更新了总结

参考：【前端路由】Vue-router 中hash模式和history模式的区别浅谈vue-router原理从vue-router看前端路由的两种实现vue-router工作原理概述和问题分析vue-router主要通过hash模式和history模式来实现前端路由。hash：即地址栏URL中的#符号history-利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。pushState()不会触发页面刷新，只是导致his

1. 前端路由的原理ans： 前端路由的本质实际上是监听url的变化，匹配相应的路由规则，实现页面的更新，并且无须刷新页面。2. 实现的两种方式ans：（1）hash模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com，即hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全