Vue开发过程中遇到的疑惑知识点总结


Posted in Javascript onJanuary 20, 2017

前言

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。最近终于有时间空下来,所以想着把在使用vue过程遇到的一些问题疑惑总结处理,方便自己或者有需要的朋友们参考,下面话不多说了,来看看详细的介绍吧。

一、计算缓存computed与Methods

html代码:

<div id='app'> 
<p>{{ msg }}</p> 
 <p>reverse {{ reverse2 }}</p>
</div>

JS

var app = new Vue({
 el : '#app' 
 data : {
 msg : '初始值'
 }  
 ,

 methods : {
 reverse : function(){
  this.msg = this.msg.split('').reverse().join('');
 }
 },
 created : function(){
 console.log('msg is creadted' + new Date() );
 },
 computed : {
  reverse2 : function(){
  return this.msg.split('').reverse().join('') + new Date();
 }
 }
});

Vue开发过程中遇到的疑惑知识点总结

计算属性就可以看作普通属性一样来使用

更改html

<div id='app'>

<p>{{ msg }}</p>

<button v-on:click='reverse'>{{ new Date()}} </button> 
</div>

Vue开发过程中遇到的疑惑知识点总结

结论:

  • 相同点: 两者完成的功能都是一样的.
  • 不同点: 计算属性computed更依赖缓存,也就是说只要msg(你的数据)不发生变化,reverse2这个计算属性就不会重新计算,还是会使用之前的.而Methods是你每一次调用就会重新进行计算,重新渲染.

所以如果你的计算属性很复杂,就可以考虑使用计算属性,利用它的缓存可以保持很好的性能.

二、v-if和v-show区别

v-if: 如果初始渲染条件为false,那什么都不做,第一次为true时候,会进行局部编译,这个编译会缓存起来.当条件再为false会销毁事件监听器和子组件.

v-show:始终存在dom里面,也就是说始终被编译了.之前按照display属性来切换.

三、重塑数组的概念

就是说有些数组方法调用后会改变原数组—就是变异方法

调用后不会改变原数组就是非变异方法

Vue不可以做的事(关于数组重塑)

  • 直接通过设置一个项的索引值. vm.items[indexOfItem] = newValue
  • 直接修改数组长度. vm.items.length = newLength

针对上述两种提供我们可以使用

Vue.set()
splice()

四、显示数组的过滤与排序

通过返回一个过滤或者排序的数组的计算属性

//html
<ul>
 <li v-for='n in soets'>{{ n }}</li>
</ul>
//js
computed : {
 soets : function(){
 return this.number.filter(function(num){
  return num > 2;
 })
 }
}

通过methods来实现:

//html
 <ul>
 <li v-for='n in sort()'>{{ n }}</li>
</ul>

//js
methods : {
 sort : function(){
  return this.number.filter(function(num){
  return num >2
  });
 }
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 #Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 #Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 #Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 #Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 #Javascript
JS中from 表单序列化提交的代码
Jan 20 #Javascript
jquery表单验证插件validation使用方法详解
Jan 20 #Javascript
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
二招解决php乱码问题
2012/03/25 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python3.4中清屏的处理方法
2020/07/06 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
元旦促销方案
2014/03/15 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
四风自我剖析材料
2014/09/30 职场文书
简易离婚协议书范本
2014/10/24 职场文书
首席执行官观后感
2015/06/03 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android