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仿qq界面的折叠菜单实现代码
Dec 12 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
jquery 手势密码插件
2017/03/17 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
python中round函数如何使用
2020/06/19 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
25道Java面试题集合
2013/05/21 面试题
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL