data

new vue({

  data:{

    'a':1

  }

})   是一个实例,data直接是一个对象

vue.component('my',{

  template:'',

  props:['title'],

  data: function() {

    return {

      'a':1 }

  }

})  是组件注册,data 返回一个函数。组件是一个相对独立的个体,如果data直接是一个对象的话,一个组件被多次使用时,属性会相互影响。所以使用一个有返回值的函数来解决这个问题。

prop

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。但子组件传值不能直接传给父组件,要在子组件的method中利用$emit('父组件中on监听的方法',值)自定义一个事件,并在父组件中引入子组件时,设置v-on:方法='方法',并在method中设置方法:function(值){}函数接收值。

详细内容:https://www.cnblogs.com/sxgxiaoge/p/9453306.html

watch和computed

两者都是监听vue属性,但是computed属性中需要一个返回值,而且代码是同步执行,而watch则不需要,代码也可以是异步的。

computed: {
fullName: {
get: function(){
return this.firstName +this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
watch: {
search: function(){
setTimeout(function(){
console.log(11);
},200);
}
}
计算属性中这两个方法是固定的(get是默认的,可以自己加set),在调用和设置对应的值的时候会调用对应的函数。

computed 和 methods  watch区别

描述

vue 中computed 和methods 在使用效果来看可以说是一样的,但是深入看还是不一样的。区别就在于: computed 依赖缓存, methods 却不是。怎么理解呢?当Dom每次需要渲染computed的值,这个值已经处于缓存之中,不需要再重复的经历一遍计算过程,只有当computed依赖的数据变量发生变化,这个计算属性会自动更新,不需要渲染触发。methods 的值被获取的时候就会每次都会重新经历一遍计算过程。

所以由此可以看出,computed和methods 的应用场景 和 计算过程的复杂程度有关, 如果计算过程复杂庞杂,而且计算属性会被经常调用(getter),那么最好使用缓存;如果,需要的值,计算简单,调用不频繁,实时性比较高(存在异步请求),会比较适合methods

computed有缓存,若相关数据未发生变化,则不调用; 
methods无缓存,需要事件才能调用它(如点击等); 
watch多用于数据交互频繁的内容。(例如定时axios从服务器获取数据)。

 

vue中的各种属性的更多相关文章

  1. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  3. vue 中的slot属性(插槽)的使用

    总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...

  4. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  5. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  6. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  7. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  8. Vue中的计算属性和监听器(computed 与 watch)

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  9. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  10. 十三、Vue中的computed属性

    以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

随机推荐

  1. Django下orm学习 一对多

    概念说明 ORM:关系对象映射的全称是 Object Relational Mapping, 简称ORM SQLAlchemy: 是Python编程语言下的一款ORM框架,该框架建立在数据库API之上 ...

  2. Linux 基础整理

    Linux系统的启动过程大体上可分为五部分:内核的引导:运行init:系统初始化:建立终端 :用户登录系统. 用户登录 Linux的账号验证程序是login,login会接收mingetty传来的用户 ...

  3. MSF魔鬼训练营-3.5.3 MSF中常用的关于数据库的命令

    渗透测试数据库用来保存渗透测试过程中获取的各种数据,很多时候你重启了kali发现连接不上数据库了,其实就是因为这个服务没开 MSF所使用的数据库时postgresql root@kali:/# ser ...

  4. [转帖]docker-compose

    docker-compose https://www.cnblogs.com/embedded-linux/p/10714179.html 需要学习使用一下. 改天自己再改改用过的yaml文件.   ...

  5. LeetCode题解: LRU Cache 缓存设计

    LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode   版权声明:本文为博主原创文章,遵循CC 4 ...

  6. Java——BufferedImage对象

    BufferedImage对象中最重要的两个组件是Raster与ColorModel,分别用于存储图像的像素数据和颜色数据. 1.Raster对象的作用与像素存储 BufferedImage支持从Ra ...

  7. Dubbo架构

    原文链接http://dubbo.apache.org 架构图 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务 ...

  8. Box-shadow制作漂亮的外阴影输入框

    背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...

  9. 无法发布-旧项目发布时出现:该项目中不存在目标“GatherAllFilesToPublish”。

    在项目文件夹下面找到 xxxx.csproj 文件,使用 VisualStudio Code 打开(或者任意编辑器,VisualStudio 可能无法编辑) 将以下节点进行更改 <Import ...

  10. Mysql学习(四)之通过homebrew安装mysql后,为什么在系统偏好设置里没有mysql

    原因 用brew install packagename是用来安装命令行工具的,一般不可能影响到图形界面. mysql官方文档是通过dmg文件安装的: The MySQL Installation P ...