- Vue的基本原理 通过遍历data的属性,调用defineActivate 方法,用object.defineProperty 劫持数据,转成getter,setter,为数据设置响应式依赖,当数据更新时,依赖通知watcher更新组件实例
2.双向数据绑定的原理
利用数据劫持加订阅者模式,用object.defineProperty 劫持getter,setter,并添加依赖,当数据变动时时,发送信息给订阅者,触发监听函数
-
使用 Object.defineProperty() 来进行数据劫持有什么缺点?
对一些属性的操作无法实现拦截,如给对象新增属性发,通过数组下标赋值, 都不能触发响应式更新($set) -
MVVM、MVC的区别 mvc model 数据模型 view 视图 control控制器
control是连接model和view的纽带,通过control调用model改变model数据,model数据更新时,
view视图更新,利用观察者模式。model改变通知view更新页面
mvvm model 数据模型 view 视图 vm监听数据模型,通知视图更新
,这个模式model和view无直接关联,主要通过vm更新视图,处理用户操作
5.computed 和watch区别
computed 一般用于数据计算,无法进行异步,有缓存
watch 一般用于数据回调,可以进行回调,无缓存
- Computed 和 Methods 的区别
computed 基于依赖的值,有缓存,当依赖的值变化才执行
metheds 函数调用时即执行
7.slot是什么?有什么作用?原理是什么?
slot插槽,是vue的一种分发内容机制, 分别为具名插槽,匿名插槽,
作用域插槽(能通过子元素的数据控制父元素显示)
作用能通过子元素改变父元素的显示
原理在进行组件渲染时根据slot进行内容替换
-
过滤器的作用,如何实现一个过滤器 根据过滤器对当前数据进行过滤,不改变原来的值
实现 filters:{ getState(s){ retrun s+1}}
vue.filter('getstate',()=>{}) -
如何保存页面的当前的状态
通过组件传值,vuex,localStorage -
常见的事件修饰符及其作用 .stop 阻止事件冒泡 .caption 与stop相反,阻止事件捕获
.once 只执行一次 .self 只执行自身
.prevent 组织元素默认行为,相当于event.preventDefault -
v-if、v-show、v-html 的原理 v-if 完全的组件销毁,v-show diplay控制显示隐藏,v-html 设置innerHtml属性
-
v-if和v-show的区别 v-if 组件层面的渲染销毁,惰性的,为false直接不渲染
v-show css层面的显示隐藏,无论为false还是true 都将元素渲染,然后编译,被缓存 -
v-model 是如何实现的,语法糖实际是什么 通过 :value 和 @input实现
:value = 'name' @input = 'value = $event.target.value' -
v-model 可以被用在自定义组件上吗?如果可以,如何使用? 可以,用法类似于直接绑定在input上的v-moel
-
data为什么是一个函数而不是对象 因为在函数进行复用时,多个组件实例之间的数据会互相干扰,为了避免这个问题,使用函数。 使得组件实例数据私有化,互不干扰
-
$nextTick 原理及作用 是dom 更新之后的延迟回调,利用js异步回调任务队列实现。
主要场景改变数据后,需要立马获取改变数据后带来的dom更新,则使用这个方法 -
Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决? 会发现数据更新了,视图没更新,可以通过$set对数据进行操作
-
Vue中封装的数组方法有哪些,其如何实现页面更新 push shift pop unshift sort resever splice
其通过vue重写了,通过监听数组_ob_属性,即obsever 对象,当数组进行更新时,手动通知notify,告诉 watcher更新