学习清单Vue初学(一)--Vue简单介绍4)--Axios前后端交互、组件初学vue(5)--路由异步DOM更新Vue采用异步DOM更新机制如何更新页面？数据发生变化后，vue不会立即将数据变化更新到视图中，而是等到数据不再变化后，一次性将数据变化更新到视图中//1.Verifiedfor(leti=0;i<1000;i++){this.count++}为什么是异步DOM更新？性能考虑因为对于前端来说，DOM操作修改数据是很常见的。如果频繁操作DOM，会严重影响页面的加载性能。DOM操作是前端性能的瓶颈。例如：for(leti=1;i<10000;i++>)如果是同步的，会重新渲染1000次来验证异步DOM更新：//2.直接获取data中的值，马上就成功console.log(this.count)this.count++console.log(this.count)//但是通过dom获取count的值，因为DOM更新了count值异步，需要一点时间console.log(document.querySelector('h1').innerText)//0this.count=100console.log(document.querySelector('h1').innerText)//0要求：之后数据更新，立即获取更新内容。在DOM更新后，this.$nextTick()会被执行回调函数，所以可以得到值//setTimeout(()=>{//console.log(document.querySelector('h1').innerText)//},1000)this.$nextTick(()=>{console.log(document.querySelector('h1').innerText)//100})一：filter概念：vue中的filter：数据格式化，也就是说让数据按照我们规定的格式输出。例如：对于日期，将日期格式化成年-月-日时:分:秒格式的过程//直接显示
{{日期}}
显示：2019-01-11T10：11:19.566Zisnotwhatwewantwhatwewant:2019-01-1118-11-53全局过滤器和局部过滤器说明：全局方式创建的过滤器可以在任何Vue实例中使用（一般来说，对于方便项目管理，是一个Vue实例）注意：使用全局过滤器时，应先创建全局过滤器，再创建Vue实例。本地创建的过滤器只能在当前Vue实例中使用。如何注册一个全局过滤器//第一个参数：过滤器的名称//第二个参数：是回调函数，只要使用过滤器，就会执行回调函数///通过获取格式化数据回调函数的返回值Vue.filter('date',res=>{return'嘻嘻'})使用示例filter://component
timestamp-format{{date2|date}}
//jsVue.filter('date',res=>{返回`${res.getFullYear()}-${res.getMonth()}-${res.getDate()}${res.getHours()}:${res.getMinutes()}:${res.getSeconds()}`})moment插件moment地址使用1.安装：`npmimoment`2.导入：3.使用date=>指定格式moment(res).format('YYYY-MM-DDHH-mm-ss')timestamp=>指定格式moment(res).format('YYYY-MM-DDHH-mm-ss')//全局Vue.filter('date',res=>{returnmoment(res).format('YYYY-MM-DDHH-mm-ss')})参数问题示例
timestamp-format{{date2|date('YYYY-MM-DDHH-mm-ss',888)}}
//默认Vue.filter('date',(res,format='YYYY-MM-DD',arg)=>{console.log(arg)returnmoment(res).format(format)})localfilter在vm配置项中写一个filter对应一个objectfilters:{date(res,format='YYYY-MM-DD',arg){returnmoment(res).format(format)}}二：计算属性computed在模板中双向绑定一些数据或表达式。如果表达式太长或者逻辑比较复杂，就会变得臃肿难读，比如：
{{text.split(',').reverse().join(',')}}
{{reversedText}}所有计算属性以函数的形式写在Vue实例中的computedoption中，最后返回计算结果你会发现这个例子可以用methods中的方法来完成，甚至可以使用methods的方法来接收参数，这样更灵活，那为什么要用computedproperties呢，因为computedproperties是基于它的依赖缓存的。当计算属性所依赖的数据发生变化时，它会重新求值，所以只要文本没有变化，计算属性就不会更新，例如：computed:{now:function(){returnDate.现在（）;}}在这里约会。now()不是反应性依赖项，因此现在不会更新计算属性。但是方法不一样，只要重新渲染，就会调用，所以函数就会执行。是否使用计算属性或方法取决于您是否需要利用缓存。当遍历大型数组并进行大量计算时，应该使用计算属性，除非你不想被缓存。计算属性的使用各种复杂的逻辑都可以在一个计算属性中完成，包括操作、函数调用等，只要最终返回一个结果即可。计算属性可以依赖于同一实例中的多个数据。只要其中任何一个发生变化，计算属性就会重新执行，视图就会更新。例如：假设要计算两种产品的价格
总价：{{prices}} {{reversedText}}计算属性的getter和setter每个计算属性都包含一个getter和setter。默认调用getter访问，需要的时候也可以提供setter。当手动修改计算属性的值时，会触发setter函数。例如：
Name:{{fullName}} 