Vue开发过程中遇到的疑惑知识点总结

前言

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();
 }
 }
});

计算属性就可以看作普通属性一样来使用

更改html

 <div id='app'>

<p>{{ msg }}</p>

<button v-on:click='reverse'>{{ new Date()}} </button>
</div>

结论:

  • 相同点: 两者完成的功能都是一样的.
  • 不同点: 计算属性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
  });
 }
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • 解决vue.js在编写过程中出现空格不规范报错的问题

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考

  • Vue开发过程中遇到的疑惑知识点总结

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js.最近终于有时间空下来,所以想着把在使用vue过程遇到的一些问题疑惑总结处理,方便自己或者有需要的朋友们参考,下面话不多说了,来看看详细的介绍吧. 一.计算缓存computed与Methods html代码: <div id='app'> <p>{{ msg }}&

  • 基于vue 开发中出现警告问题去除方法

    出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结

  • vue项目中引入Sass实例方法

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

  • vue中的虚拟dom知识点总结

    目录 一.简介 二.为什么VUE引入了虚拟DOM? 三.vnode 1.vnode的类型 四.虚拟dom的核心——patch 1.patch的过程 新增节点 删除节点 更新节点 静态节点 新虚拟节点有文本属性 新虚拟节点无文本属性 五.更新子节点的优化策略 一.简介 虚拟dom是随着时代发展而诞生的产物. 命令式操作dom: 简单易用 程序中的状态很难管理,代码中的逻辑也很混乱. 现在三大主流框架都是声明式操作DOM.通过描述状态和DOM之间的映射关系,就可以将状态渲染成视图.状态可以是JS 中

  • Vue.js 中的 $watch使用方法

    这两天学习了Vue.js 中的 $watch这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. github 源码 Observer, Watcher, vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.下面我们来看看 如何实现一个简单的 $watch 功能,当然Vue 中使用了很多优化手段,在本文中暂不一一讨论. 例子: // 创建 vm let vm = new Vue({ data: 'a' }) // 键路径 vm.$watch('a.b.c', func

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • vue项目中使用fetch的实现方法

    fetch的由来和定义 fetch的由来  众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象.但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好.而Fetch 的出现就是为了解决 XHR 存在的问题. fetch的定义和使用 MDN

  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; 这样的话,我们在各个组件中进行请求时,就可以直接使用this.$axios,但是在ts中使用this.$axios进行请求时,会进行报错,如下所示: 从图中我们可以看出ts在Vue身上检测不到

  • VUE项目中加载已保存的笔记实例方法

    现在笔记内容每次改变都会进行保存操作,我们需要在应用重新打开的时候恢复数据.这里 将使用 localStorage.getItem() API.将下面的代码添加到 JavaScript 文件的最后: 一个基本的笔记编辑器 console.log('restored note:', localStorage.getItem('content')) 当刷新应用时,可以看到在浏览器控制台打印出了已经保存的笔记内容. 1. 生命周期钩子 将笔记内容恢复到 Vue 实例中的第一种方法就是在创建实例的时候设

  • 关于vue项目中搜索节流的实现代码

    我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是 根据防抖节流而实现的,至于用防抖还是节流根据自己需求. <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let timer = 0 return function (callback, ms) { cl

随机推荐