安装:
vue不支持iE8及以下版本的原因:因为vue使用了ie8无法模拟的es5特性,
但它支持所有兼容es5的浏览器(兼容性查询网址Can I Use:https://www.caniuse.com/);
vue最新稳定版本为2.6.11;
使用vue时,推荐在浏览器安装vue devtools插件,我们可以更好的修改调试vue;
vue的引入方式有两种:1是直接用script引入,2是使用npm或yarn等包管理工具直接下载;
vue的脚手架的作用:提供了batteries-include的构建设置,并且带有热重载保存时lint校验等等;
vue脚手架安装方式:npm install -g @vue/cli或yarn global add @vue/cli
(注意:这是vue-cli3的安装方式,如果安装了旧版本,需要先卸载:npm uninstall vue-cli -g);
vue创建新项目:vue create my-project或vue ui;
vue拥有四种构建版本:完整版,只包含运行时版,完整版(生产环境),只包含运行时版(生产环境);
(注意:官方推荐使用运行时版,可以节省30%空间)
安装常见知识点:
1.vue优点?
答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,
只需要操作数据就能完成相关操作;
虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,
但具体操作的还是dom不过是换了另一种方式;
运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
2.vue的两个核心点
答:数据驱动、组件系统
数据驱动:ViewModel,保证数据和视图的一致性。
组件系统:应用类UI可以看作全部是由组件树构成的。
3.vue和jQuery的区别
答:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,
其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。
比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,
可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
4.单页面应用和多页面应用区别及优缺点
答:单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有
必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会
分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
单页面的优点:
用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;
页面效果会比较炫酷(比如切换页面内容时的专场动画)。
单页面缺点:
不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,
所以需要自己建立堆栈管理);初次加载时耗时多;页面复杂度提高很多。
5.mvvm 框架是什么?
答:vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。
在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
介绍:
1.vue是什么?
答:Vue是一套用于构建用户界面的渐进式框架.与其他大型框架不同的是,vue被设计为可以自底像上逐层引用.
vue的核心库只关注图层,不仅上手容易,还方便与第三方库结合.另一方面,当vue与现代化工具链以及支持类库结合使用时也完全
能够为复杂的单页面应用提供驱动.
2.vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM系统;
指令带有前缀v-,表示它们是vue提供的特殊 attribute;
3.过渡效果
vue在插入,更新,移除DOM的时候,提供多种不同方式的应用过渡效果:
在css过渡和动画中自动应用css;配合第三方动画库,如animate.css;在过渡钩子函数使用javascript直接操作DOM;配合第三方js动画库,
如Velocity.js;
4.过渡的类名
在进入/离开的过渡中,有6个class切换:
1)v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除.
2)v-enter-active:定义进入过渡生效时的状态.在整个进入过渡的阶段中应用,在元素被插入之前
生效,在过渡/动画完成之后移除.这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数.
3)v-enter-to:2.1.8版本及以上定义进入过渡的结束状态.在元素被插入之后下一帧生效(与此同时v-enter被移除),
在过渡/动画完成之后移除.
4)v-leave:定义离开过渡的开始状态.在离开过渡被触发时立刻生效,下一帧被移除.
5)v-leave-active:定义离开过渡生效时的状态.在整个离开过渡的阶段中应用,在离开过渡
被触发时立刻生效,在过渡/动画完成之后移除.这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数.
6)v-leave-to:2.1.8版本及以上定义离开过渡的结束状态.在离开过渡被触发之后的下一帧生效(与此同时v-leave被删除),
在过渡/动画完成之后移除.
总结:v-enter=>v-enter-to=>v-leave=>v-leave-to,在v-enter到v-enter-to之间,有v-enter-active,
在v-leave到v-leave-to之间,存在v-leave-active.
5.过渡模式
in-out:新元素先进行过渡,完成之后当前元素过渡离开.
out-in:当前元素先进行过渡,完成之后新元素过渡进入.
6.动态组件
在tab页面切换时,推荐使用动态组件.v-bind:is="currentTabComponent",此处的currentTabComponent可以包括已注册组件的名字或
一个组件的选项对象.
但是在tab切换的时候,如果我们想要点击tab切换之后,缓存我们之前的操作页面,可以在动态组件外面套用<keep-alive></keep-alive>,
这样的话失活的组件将会被缓存.
7.异步组件
new Vue({
components:{ 'my-component':()=>import('./my-async-component') }});
推荐做法是将异步组件和webpack的code-spliting功能一起配合使用,如
Vue.component('async-webpack-example',function(resolve){
// 这个特殊的\`require\`语法将会告诉webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过ajax请求加载 require(\['./my-async-component'\],resolve)})
介绍常见知识点:
1.vue与其他框架的对比?
答:vue和react相似之处:使用了virtual Dom;提供了响应式(reactive)和组件化(composable)的视图组件;将注意力集中保持在
核心库,而将其他功能如路由和全局状态管理交给相关的库.
vue与react和angular不同之处:
1)运行时的性能:
在react应用中,当某个组件的状态发生变化时,他会以该组件为根,重新渲染整个组件子树.
如果避免不必要的子组件重复渲染,需要在所有可能的地方使用PureComponent,或者是手动实现shouldComponentUpdate方法.
同时,你可能会需要使用不可变的数据结构来使得你的组件更容易被优化,但是使用PureComponent和shouldComponentUpdate时,需要
保证该组件的整个子树的渲染输出都是由该组件的props决定的.如果不符合这个情况,那么此类优化就会导致难以察觉
的渲染结果不一致;
在vue应用中,组件的依赖是在渲染过程中自动跟踪的,所以系统能精确知晓哪个组件确实需要被重渲染.
可以理解为每一个组件都已经自动获取了shouldComponentUpdate,并且没有上述的子树问题限制;
在angular应用中,当watcher越来越多时,会变得越来越慢,因为作用域的每一次变化,所有的watcher都要重新计算.
并且,如果一些watcher触发另一个更新,脏检查循环(digest cycle)可能要运行多次.
angular用户常常要使用深奥的技术,来解决脏检查循环的问题.但vue没有这个问题,它不使用脏
检查,它是基于依赖跟踪的观察系统并且异步队列更新,所有的数据变化都是独立触发的,除非它们之间有明确的依赖关系.
2)HTML&CSS:
在react应用中,使用了jsx,jsx是使用XML语法编写的js的一种语法糖.
使用jsx的渲染函数有下面这些优势:你可以使用完整的编程语言javascript功能来构建你的视图页面.比如你可以使用临时变量,
js自带的流程控制,以及直接引用当前js作用域中的值等;开发工具对jsx的支持相比于现有可用的vue模板还是比较先进的
(比如,linting,类型检查,编辑器的自动完成).
在vue应用中,使用了模板template.
模板template相对于jsx的优势:模板更容易接受和读写,使用者不需要单独学习XML语法,降低学习成本,上手容易;
基于HTML的模板使得将已有的应用逐步迁移到vue更容易;让设计图和新人开发者更容易理解和参与到项目中;
可以使用其他模板预处理器,比如Pug来书写Vue的模板.从抽象的角度来看,更推荐在偏视图表现类的组件里使用模板,在
偏逻辑的组件中使用jsx和渲染函数.
3)组件作用域的Css
这里react和vue的主要区别是,vue设置样式的默认方法是单文件组件里类似style的标签.大部分情况下,我们都会在style
里面添加一个scoped属性,该属性会自动添加一个唯一的属性(比如 data-v-2155b78)为组件内css指定作用域,
编译的时候,会在css类目后面添加\[data-v-2155b78\].最后,vue的单文件组件里的样式
设置是非常灵活的,通过vue-loader,可以使用任意预处理器,后处理器,甚至深度集成css module---全部都在<style>标签内.
4)路由库和状态管理库
react把路由库和状态管理库交给社区维护;
vue把路由库和状态管理库交给官方维护,并且与核心库同步更新;
5)学习曲线
react学习曲线陡峭,在学习react之前,你需要知道jsx和es2015,需要学习构建系统;
angular学习曲线非常陡峭,因为angular本身的设计目的,就是针对大型复杂的应用,学习成本高;
vue学习曲线教平和,向上扩展好比react,向下扩展就类似jquery,只需要引入script即可,入手容易简单;
6)原生渲染
react native可以用相同的组件模型编写有本地渲染能力的App(ios和android).能同时跨多平台开发;
vue此处还处于劣势,虽然vue和weex进行合作,但是weex基本上已经被阿里巴巴放弃了;
7)语法
vue的一些语法和angular很相似(例如 v-if和ng-if).因为angular是vue早期开发的灵感来源.但是angular中存在的许
多问题(比如脏检查),在vue中已经避免和解决.
8)组件和指令
在vue中指令和组件分的更清晰.指令只封装DOM操作,而组件代表了一个自给自足的独立单元--有自己的视图和数据逻辑.
在angular中,每件事都由指令来做,而组件只是一个特殊的指令.
9)数据绑定
angular使用了双向绑定
vue在不同组件间,强制使用单向数据流.
2.v-if和v-show的区别?
答:共同点:都能控制元素的显示和隐藏;
不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;
v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使
用v-if(初始渲染开销较小,切换开销比较大)。
优先级:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。
所以,不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。
3.当插入或删除包含在transition组件中元素时,vue做了哪些处理?
答:1)自动嗅探目标元素是否应用了css过渡或动画,如果是,在恰当的时机添加/删除css类名;
2)如果过渡组件提供了js钩子函数,这些钩子函数会在恰当的时机被调用;
3)如果没有找到js钩子函数或css过渡/动画,DOM操作(插入/删除)在下一帧中立即执行.
(注意:此指浏览器逐帧动画机制,和vue的nextTick概念不同).
4.为什么使用key?
答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM.
5.说出几种vue当中的指令和它的用法?
答:v-model双向数据绑定;
v-for循环;
v-if v-show 显示与隐藏;
v-on事件;v-once: 只绑定一次。
6.v-model的使用?
答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
v-bind绑定一个value属性;
v-on指令给当前元素绑定input事件。
7.vue中双向数据绑定是如何实现的?
答:vue双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,
视图变化,数据也随之发生改变;
核心:关于vue双向数据绑定,其核心是Object.defineProperty()方法。
8.css动画和css过渡的区别?
答:在动画中v-enter类名在节点插入dom后不会立即删除,而是在animationend事件触发时删除.
9.在一些场景中,需要给同一个元素设置多种过渡动效,比如animation很快的被触发并完成了,
但是transition效果还没结束,这种情况怎么处理?
答:需要使用type attribute并设置animation或transition来明确声明你需要vue监听的类型.
10.v-on可以监听多个方法吗?
答:可以,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
vue实例
1.vue实例在创建的时候,经历的过程:设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM.
2.不要在选项属性或回调上使用箭头函数,比如created:()=>console.log(this.a)或
vm.$watch('a',newValue=>this.myMethod()).因为箭头函数并没有this,this会作为变量一直
向上级词法作用域查找,直到找到为止,经常导致Uncaught TypeError:Cannot read property of undefined或
Uncaught TypeError:this.myMethod is not a function 之类的错误.
3.vue的生命周期函数:beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed
vue实例常见知识点
1.简述每个周期具体适合哪些场景?
答:beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命
周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create:data 和 methods都已经被初始化好了,如果要调用 methods中的方法,或者操作data 中的数据,最早可以在这个阶段中操作 beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的 mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通 过插件操作页面上的DOM节点,最早可以在和这个阶段中进行 beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步 updated:页面显示的数据和data中的数据已经保持同步了,都是最新的 beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods ,指令,过滤器 ……都是处于可用状 态。还没有真正被销毁 destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。
2.第一次页面加载会触发哪几个钩子?
答:beforeCreate,created,beforeMount,mounted
3.created和mounted的区别?
答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
4.vue获取数据在哪个周期函数
答:一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
5.mvvm 框架是什么?
答:vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。
在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
6.请详细说下你对vue生命周期的理解?
答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和\*\*数据对象\*\*data都为undefined,还未初始化。在created阶段,vue实例
的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。
在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,
但是dom结构依然存在。
7.vue初始化页面闪动问题?
答:使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,
看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们还是有必要让解决这个问题的。
首先:在css里加上\[v-cloak\] {
display: none; }。如果没有彻底解决问题,则在根元素加上 :
8.SPA首屏加载慢如何解决
答:安装动态懒加载所需插件;使用CDN资源。
9.vue组件中data为什么必须是一个函数?
答:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,
相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实
例共用了一个data,这样改一个全都改了。
10.$nextTick的使用
答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功
11.vue父组件子组件传递数据?
答:父组件传子组件通过props,子组件传父组件通过$emit方法
12.如何获取dom?
答:ref="domName" 用法:this.$refs.domName
13.如何让CSS只在当前组件中起作用?
答:在组件中的style前面加上scoped
14.<keep-alive></keep-alive>的作用是什么?
答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
15.请说出vue.cli项目中src目录每个文件夹和文件的用法?
答:assets文件夹是放静态资源;components是放组件,router是定义路由相关的配置;app.vue是一个应用主组件;main.js是入口文件。
16.分别简述computed和watch的使用场景
答:computed:
当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候 watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据17.assets和static的区别
答:
相同点:assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,
这是相同点
不相同点:assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,
所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同 上传至服务器。 static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。 因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也 就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。建议:将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文
件如iconfoont.css等文件可以放置在static中,
因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。
18.vue常用的修饰符
答:.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
.prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件, 而不停止事件的进一步传播); .capture:与事件冒泡的方向相反,事件捕获由外到内; .self:只会触发自己范围内的事件,不包含子元素; .once:只会触发一次。
模板语法
1.Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少。
1)文本:数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:<span>Message: {{ msg }}</span> 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
2)原始HTML:双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令. 注意事项:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值, 绝不要对用户提供的内容使用插值。 3)Attribute:Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令 注意事项:如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled attribute 甚至不会被包含 在渲染出来的 <button> 元素中。
4)使用 JavaScript 表达式:每个绑定都只能包含单个表达式,所以下面的例子都不会生效。 <!-- 这是语句,不是表达式 -->
{{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }} 注意事项:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 。你不应该在模板表达式中试图 访问用户定义的全局变量
2.指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
1)参数:v-bind 指令可以用于响应式地更新 HTML attribute;v-on 指令,它用于监听 DOM 事件
2)动态参数:从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数 <!-- 注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。 --> <a v-bind:\[attributeName\]="url"> ... </a> 例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href。 同样地,你可以使用动态参数为一个动态的事件名绑定处理函数: <a v-on:\[eventName\]="doSomething"> ... </a>
在这个示例中,当 eventName 的值为 "focus" 时,v-on:\[eventName\] 将等价于 v-on:focus。 动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串 类型的值都将会触发一个警告。
3)修饰符:修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符 告诉 v-on 指令对于触发的事件调用 event.preventDefault()
3.缩写:v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a> … v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a> …
模板语法常见知识点
1.动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。例如:
<!-- 这会触发一个编译警告 -->
<a v-bind:\['foo' + bar\]="value"> ... </a> 变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,
因为浏览器会把 attribute 名全部强制转为小写: <!--
在 DOM 中使用模板时这段代码会被转换为 \`v-bind:\[someattr\]\`。 除非在实例中有一个名为“someattr”的 property,否则代码不会工作。 --> <a v-bind:\[someAttr\]="value"> ... </a>
2.vue常用的修饰符
答:.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡; .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为 (如果事件可取消,则取消该事件,而不停止事件的进一步传播); .capture:与事件冒泡的方向相反,事件捕获由外到内; .self:只会触发自己范围内的事件,不包含子元素; .once:只会触发一次
3.delete和Vue.delete删除数组的区别
答:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组改变了数组的键值。
计算属性和侦听器
1.计算属性:
1)基础例子:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。
2)计算属性缓存 vs 方法: 两种方式的最终结果确实是完全相同的。 然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。 这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:
computed: {
now: function () { return Date.now() } } 相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。 为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有 其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
3)计算属性VS侦听属性: Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) 上面代码是命令式且重复的。将它与计算属性的版本进行比较: var vm = new Vue({
el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 好得多了,不是吗?
4)计算属性的 setter: 计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter : // ...
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names\[0\] this.lastName = names\[names.length - 1\] } } } // ... 现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
2.侦听器:
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了 一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 watch: { // 如果 \`question\` 发生改变,这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } } 在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前, 设置中间状态。这些都是计算属性无法做到的。
计算属性和侦听器常见知识点
1.分别简述computed和watch的使用场景
答:computed:
当一个属性受多个属性影响的时候就需要用到computed 最典型的场景: 购物车商品结算的时候 watch: 当一条数据影响多条数据的时候就需要用watch 场景:搜索数据
2.v-on可以监听多个方法吗?
答:可以,<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
3.手写一个watch监听?
答:watch: {
year: {
handler (newValue, oldValue) {
console.log('时间又过去了1年,今年是' + newValue) console.log('新值是' + newValue + ',旧值是' + oldValue)
},
immediate: true,
deep: false
},
}