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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
基于openlayers实现角度测量功能
Sep 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
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
Python urlopen()函数 示例分享
2014/06/12 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python操作链表的示例代码
2020/09/27 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
小学生自我鉴定
2013/10/12 职场文书
小学生元旦感言
2014/02/26 职场文书
励志演讲稿200字
2014/08/21 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
党校学习党性分析材料
2014/12/19 职场文书
留学推荐信英文范文
2015/03/26 职场文书
昆虫记读书笔记
2015/06/26 职场文书
摘录式读书笔记
2015/07/01 职场文书
诚信考试主题班会
2015/08/17 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL