Vue的双向绑定数据的原理
采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
Vue 如何去除url中的
vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 url 会自带 #。如果不想使用 #, 可以使用 vue-router 的另一种模式 history。
new Router({
mode: 'history',
routes: [ ]
})
v-if 和 v-show 区别
使用了 v-if 的时候,如果值为 false ,那么页面将不会有这个 html 标签生成。v-show 则是不管值为 true 还是 false ,html 元素都会存在,只是 CSS 中的 display 显示或隐藏。
route和route和route和router的区别
$router 为 VueRouter 实例,想要导航到不同 URL,则使用 r o u t e r . p u s h 方 法 router.push 方法 router.push方法route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。
NextTick的作用
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
Vue 组件 data 为什么必须是函数
因为js本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象,那么每一个实例的 data 属性都是独立的,就不会相互影响了。
Vue 中怎么自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
在局部注册:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
keep-alive 的作用
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,还可以使用API提供的props,实现组件的动态缓存
<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>
Vue 的核心是什么
数据驱动 组件系统
vue 等单页面应用的优缺点
优点:
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力
缺点:
SEO难度较高
前进、后退管理
初次加载耗时多