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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 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文件怎么打开 如何执行php文件
2011/12/21 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python__name__原理及用法详解
2019/11/02 Python
python中的错误如何查看
2020/07/08 Python
python识别验证码的思路及解决方案
2020/09/13 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
异常和异常类的概念
2014/09/12 面试题
村主任当选感言
2015/08/01 职场文书
导游词之阆中古城
2019/12/23 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
php实现自动生成验证码的实例讲解
2021/11/17 PHP