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创建类/对象的几种方式概述及实例
May 06 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
js实现移动端吸顶效果
Jan 08 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 Session机制简介及用法
2014/08/19 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python实现处理mysql结果输出方式
2020/04/09 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
骨干教师培训制度
2014/01/13 职场文书
给学校建议书范文
2014/05/13 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
老人与海读书笔记
2015/06/26 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS