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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
深入理解javascript中的this
Feb 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
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
js里的prototype使用示例
2010/11/19 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
使用js实现数据格式化
2014/12/03 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
js实现转动骰子模型
2019/10/24 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python+flask实现API的方法
2018/11/21 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
亮剑观后感500字
2015/06/05 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python