目录
12.react、vue中的key有什么作用？（key的内部原理）
14. vue的响应式原理中 object.defineproperty有什么缺陷?
15.组件中 data，computed 和 watch 的区别
1.单页面(spa)
只有一个主页面的应用,浏览器一开始要加载所有的html,js,css 所有的页面内容都包含在这个所谓的主页面中,但是在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源,多应用pc端.
优点: 用户体验好,快
内容的改变不需要加载整个页面,spa对服务器压力较小
前后端分离
页面效果会比较炫酷(比如切换页面内容时的转场动画)
缺点:不利于seo
导航不可用,如果一定要导航需要自行实现前进,后退(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
初次加载耗时多
页面复杂度提高
多页面(mpa)
就是指一个应用中有多个页面,页面跳转就是整页刷新
2.虚拟dom
虚拟dom就是js对象对真实dom的描述,它是真实dom的抽象,最终通过一系列操作映射到真实环境中.通俗的说就是js与dom之间的缓存,通过patch(diff)对比新旧虚拟dom并将它记录到一个对象中,最终创建真实的dom
工作原理: 模板 ==> 渲染函数 ==> 虚拟dom ==>真实dom
通过编译将模板转为渲染函数,执行渲染函数时会得到虚拟节点树,利用diff算法,比较两个新旧dom的差异,通过patch把差异返回给一个对象,最终搭建真实dom
3.库、组件、插件、框架的区别?
库 :Jquery Zepto 提供项目常用方法,相当于工具包
组件 :bootStarp swiper 多个插件集合体,提供js,css,html
插件 :iScroll 把项目中的某一个功能进行封装
框架 :angular Vue React uni-app 库+组件的集合体
4.MVVM
全称是model-view-viewModel,是一种设计思想,核心是vm
M: --model --- 模型 -- 当前页面依赖的数据源
V: --view --- 视图 -- 当前页面的结构
VM: --viewModel --- 视图模型 --vm对象
工作原理:
model和view本质上并没有直接的联系,VM作为mvvm的核心,将model和view连接了起来,使model和view进行了交互
当model数据源发生变化时,vm会监听到,vm对象会把数据源自动同步于view中
当view发生变化时,vm也会监听到,vm对象会把变化之后的view同步于model之中
model和view之间的工作是完全自动的,因此开发者只需要关注业务逻辑,不需要手动操作dom,复杂的状态完全由mvvm统一管理
5.数据代理
在Es6中:数据代理就是通过一个对象代理对另一个对象的操作
在vue中:通过vm对象代理对data中属性的操作
为什么使用
可以更好地操作data中的属性
代理对象原理
通过object.defineProperty把data对象的属性中添加到vm上,把添加的属性制定getter和setter,通过getter和setter可以对属性执行读与写的操作
6.v-model工作原理 (只能用在input里面)
v-model本质是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。
原生的v-model，会根据标签的不同生成不同的事件和属性
text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
可以将v-model进行如下改写：
<input v-model="sth" />等同于<input :value="sth" @input="sth = $event.target.value" />
这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input
7.vue实现双向数据绑定的原理
采用数据劫持结合发布者-订阅者模式的方式,通过object.defineproperty()来劫持各个属性的set,get,在数据变动时发布消息给订阅者,触发相应监听回调.当把一个普通javascript对象传给vue实例作为他的data选项时,vue将遍历它的属性,用object.defineproperty()将他们转为getter/setter.用户看不到getter/setter,但是在内部他们让vue追踪依赖,在属性被访问和修改时通知变化
8.谈一谈对原生js开发和使用vue开发的看法
原生js:面向浏览器编程,需要写很多兼容性代码
操作dom更加繁琐,复杂交互需要频繁操作dom,且代码不够友好
可扩展性和可维护性没有保证
团队协作困难
开发效率低下
vue优点:基于MVVM实现的数据驱动视图,解放了dom操作
view与model分离处理,降低代码耦合度
vue缺点:双向绑定,bug调试难度增大
大型项目中,view和model过多,维护成本高
9.在vue组件中,data为什么是一个返回对象的函数
如果data是对象,由于对象是引用类型,组件被复用时,就会创建多个实例.本质上,这些实例用的都是同一个构造函数.这样就会影响到所有的实例.所以为了保证组件不同的实例之间data不冲突,data必须是一个函数
10.computed 与 watch的区别?
功能不同:
watch:侦听属性,侦听数据是否发生变化,执行对应的回调
computed:计算属性,依赖一个值计算另一个值,当数据发生变化时,使用该数据地方也会发生变化
是否调用缓存:
computed:只有数据发生变化才会重新计算,否则从缓存中读取
watch:数据发生变化时,执行对应的回调,不会调用缓存
是否调用return:
computed:必须要用return返回数据
watch:不是必须要用return
首次加载是否监听:
watch:首次加载默认不做监听,如果需要,添加属性immediate:true
computed:首次加载默认做监听
是否支持异步:
computed:不支持异步,内部有异步操作时失效,且无法监听数据变化
watch:支持异步
使用场景:
computed:一个数据受多个数据影响
watch:一个数据影响多个数据
11.vue是什么
vue是什么？vue的优势？vue的核心？vue的特性?vue的优缺点？vue的使用场景？
概念：vue是一款用于构建用户界面的javascript框架.他基于html,css,javascript构建,并提供了一套声名式的,组件化的编程模型,帮助高效开发用户界面
优势【特点】：
易用:有简单的html、 css、js基础便可
灵活:在库与框架之间自如伸缩
高效:文件小、便捷的虚拟dom、方便优化
核心：数据驱动【mvvm】与 组件化
特性：数据驱动视图【mvvm】和双向数据绑定【数据响应式】
优点:
轻量级框架
渐进式框架
虚拟dom
组件化开发
数据响应式【双向数据绑定】
单页面路由
数据和视图的分离
缺点:
单页面不利于seo优化
不支持ie8以下
首屏加载时间长
vue的使用场景
单页面应用开发以及移动端
对vue的理解
Vue 是一套构建用户界面的渐进式的自底向上增量开发的 MVVM 框架，核心是关注视图层，vue 的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以 vue 的核心思想是数据驱动和组件化，这里也说一下 MVVM 思想，MVVM 思想是 模型 视图 vm 是 v 和 m 连
接的桥梁，当模型层数据修改时，VM 层会检测到，并通知视图层进行相应修改
12.react、vue中的key有什么作用？（key的内部原理）
a. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
b.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
c. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
d. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用index作为key是没有问题的。
13.v-if 和 v-for 为什么不建议放在一起使用？
Vue 2 中，v-for的优先级比v-if高，这意味着v-if将分别重复运行于每一个v-for循环中。如果要遍历的数组很大，而真正要展示的数据很少时，将造成很大的性能浪费。
Vue 3 中，则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，会导致异常。
14. vue的响应式原理中 object.defineproperty有什么缺陷?
Object.defineproperty()无法监控到数组下标的变化，导致通过数组下标添加元素Object.defineproperty()不能实时响应;
Object.defineProperty .只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。
Proxy 可以劫持整个对象，并返回一个新的对象不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性
15.组件中 data，computed 和 watch 的区别
相同点:
在 Vue 组件中，data、computed 和 watch 都是用来处理数据的
不同点:
data: 组件内部的数据源，可以用来存储和处理组件内部的数据。通过在组件中定义 data 属性来声明一个数据源。
computed: 计算属性，用于计算和处理从 data 中获取的数据，提供一种简洁的方式来处理模板中的复杂逻辑。computed 属性具有缓存机制，只有在它的依赖项发生变化时才会重新计算。
watch: 用于观察和响应数据的变化，当被观察的数据发生变化时，watch 中的回调函数会被调用。可以用 watch 来处理一些需要在数据变化时立即执行的操作，例如异步操作等。
总的来说，data 用于存储组件内部的数据，computed 用于计算和处理需要从 data中获取的数据，而 watch 用于处理数据的变化,如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化
扫一扫
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
