对MVVM的理解
MVVM是Model、View、ViewModel三者的缩写;
- Model:代表数据模型,数据和业务逻辑都在Model层中定义;
- View:代表UI视图,负责数据展示;
- ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。
vue实现双向绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
Vue与Angular以及React的三者之间的区别
与AngularJS的区别:
相同点:都支持指令(内置指令和自定义指令);都支持过滤器(内置过滤器和自定义过滤器);都支持双向绑定;都不支持地段浏览器。
不同点:AngularJS的学习成本高;而Vue.js本身提供的API都比较简单、只管;在性能上,AngularJS以来对数据做账检查,所以Watcher越多越慢;Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。
与React的区别:
相同点:React采用特殊的JSX语法,Vue.js在组建开发中也推崇写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。
不同点:React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。
vue等单页面应用及其优缺点
单页面应用(SPA)
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面应用(MPA)
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。
单页面的优点:
用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷(比如切换页面内容时的专场动画)。
单页面缺点:
不利于seo。
导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)。
初次加载时耗时多。
页面复杂度提高很多。
怎么定义vue-router的动态路由?获取传值?
定义:在router目录下的index.js文件中,对path属性增加/:id
获取:使用router对象的params.id
vue如何获取并操作dom对象
在标签上添加ref=‘myBox’,然后在代码中this.$refs.myBox
<template>
<div ref="myBox">
<h1>首页标题</h1>
</div>
</template>
<script>
export default {
name: "Home",
mounted(){
this.$refs.myBox.style.color = 'red'
}
}
</script>
<style scoped>
div{
background: pink;
}
</style>
vue-loader是什么?使用它的途径有哪些?
vue-loader作用:
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理
用途:
js可以写es6,style样式可以写scss或less、template可以加jade等
vue组件间传递方法
props:子组件的模板内并不能直接使用父组件的数据,所以子组件需要用props选项来获取父组件的数据
1- 动态语法:用v-bind将动态props绑定到父组件的数据,父组件的数据发生改变,子组件也会随之改变
<div id="app">
<didi-component :msg="value"></didi-component>//传入获取的数据,引号里面为获取到的数据
</div>
<script>
window.onload=function(){
Vue.component('didi-component',{
template:"<div>这是组件:{{msg}}</div>",
props:['msg'] //声明自己要从父组件获取的数据
});//全局注册组件
new Vue({
el:'#app',
data: {
value:'父组件向子组件的传递数据'
}
})
2-绑定修饰符:props默认为单向绑定,是为了防止子组件无意间修改父组件的状态。
.sync:双向绑定
.once:单次绑定
<div id="app">
<input type="text" v-model="info.name"/>
<child :msg.once="info"></child> //单次绑定
</div>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:function(){
return {
info:{
name:"顺风车" //父组件
}
}
},
components:{
child:{
props:['msg'],
template:"<div>{{msg.name}}欢迎!</div>" //子组件
}
}
})
}
vue如何定义过滤器?
new Vue({
filters:{
myCurrency:function(myInput){
return 处理后的数据
}
}
})
v-if和v-show的区别
v-if
它是惰性的,只有值为真的时候才会被选渲染。
如果从值 从 true 改变 为 false 则元素就会被销毁。
如果又从 false 改变 true 则元素会被重建。
v-show
它不管初始条件是什么,元素总是会被渲染。
它的值的变化,只是对 css display 属性的切换。
那么如何选择使用 v-if和v-show呢?
频繁切换的元素使用v-show。
条件很少改变,则使用 v-if 较好。
vue中常用的指令:
插入文本:v-text
相当于元素的innerText属性,必须是双标签
插入HMTL:v-html
相当于元素的innerHTML属性
循环:v-for
v-for的使用,除了item属性,还有一些其他辅助属性。假设你现在循环的对象名字为students:
如果students是数组,还有index属性,如v-for=“(item,index) in students”;
如果students是对象,还有value,key属性,如v-for=“(value,key,index) in students”;
条件渲染
第一种:if … else if …else型
是否插入元素
第二种:v-show
是否隐藏元素
属性绑定:v-bind
v-bind:属性名=“常量 || 变量名”,简写形式——:属性名=“常量 || 变量名”
双向绑定:v-model
所谓的双向绑定,就是你在视图层里面改变了值,vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。
vue常用事件修饰符:
.stop 防止事件冒泡
冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外 子节点-》父节点的点击事件
.prevent取消默认事件
.prevent等同于JavaScript的event.preventDefault(),用于取消默认事件。比如我们页面的<a href="#">
标签,当用户点击时,通常在浏览器的网址列出#:
.capture 捕获事件
捕获事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从外至内 父节点-》子节点的点击事件
v-on可以绑定多个方法吗
<input
type="text"
v-on="{
input:onInput,
focus:onFocus,
blur:onBlur,
}"
>
Vue的生命周期函数都有哪些?什么时候调用?
(1)beforeCreat
第一个生命周期函数,表示实例在完全创建出来之前会执行它,在执行它时,data和methods中的数据都还未初始化。
(2)created
第二个生命周期函数,此时data和methods已经初始化完成,created()完成之后,vue开始编译模板,最终在内存中生成一个编译好的最终模板字符串,然后把模板字符串渲染为内存中的dom
(3)beforeMount
第三个生命周期函数,表示模板在内存中已经编译好了,但是并没有渲染到页面中。页面显示的还仅仅是模板字符串
(4)Mounted
第四个生命周期函数,此时内存中的模板已经真实的挂载到了页面中,用户可以看到渲染好的页面了
运行中的两个事件
(5)beforeUpdated()
执行它时,data中的数据已经被更新了,但是页面中的data还未被替换过来
(6)updated()
执行它时,页面和data中的数据已经同步了
对keep-alive 的了解
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
与 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。
keep-alive生命周期钩子函数:activated、deactivated
使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。
被包含在 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated
activated:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated:在组件被停用时调用。
注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。
什么时候获取数据?
当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
route和router的区别?
route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 而router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
vue.js的核心特征是什么?
数据驱动、组件系统
数据驱动:ViewModel,保证数据和视图的一致性。
组件系统:应用类UI可以看作全部是由组件树构成的。
5.vue等单页面应用及其优缺点?
优点:
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。
数据驱动
组件化
轻量
简洁
高效
模块友好
页面切换快
缺点:
不支持低版本的浏览器,最低只支持到IE9;
不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);
首屏加载耗时相对长一些;
不可以使用浏览器的导航按钮需要自行实现前进、后退。
$nextTick的使用
Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。