vue中的各种属性
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中的各种属性的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- Vue中的计算属性和监听器(computed 与 watch)
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
- vue中的$attrs属性和inheritAttrs属性
一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...
- 十三、Vue中的computed属性
以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...
随机推荐
- Django下orm学习 一对多
概念说明 ORM:关系对象映射的全称是 Object Relational Mapping, 简称ORM SQLAlchemy: 是Python编程语言下的一款ORM框架,该框架建立在数据库API之上 ...
- Linux 基础整理
Linux系统的启动过程大体上可分为五部分:内核的引导:运行init:系统初始化:建立终端 :用户登录系统. 用户登录 Linux的账号验证程序是login,login会接收mingetty传来的用户 ...
- MSF魔鬼训练营-3.5.3 MSF中常用的关于数据库的命令
渗透测试数据库用来保存渗透测试过程中获取的各种数据,很多时候你重启了kali发现连接不上数据库了,其实就是因为这个服务没开 MSF所使用的数据库时postgresql root@kali:/# ser ...
- [转帖]docker-compose
docker-compose https://www.cnblogs.com/embedded-linux/p/10714179.html 需要学习使用一下. 改天自己再改改用过的yaml文件. ...
- LeetCode题解: LRU Cache 缓存设计
LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode 版权声明:本文为博主原创文章,遵循CC 4 ...
- Java——BufferedImage对象
BufferedImage对象中最重要的两个组件是Raster与ColorModel,分别用于存储图像的像素数据和颜色数据. 1.Raster对象的作用与像素存储 BufferedImage支持从Ra ...
- Dubbo架构
原文链接http://dubbo.apache.org 架构图 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务 ...
- Box-shadow制作漂亮的外阴影输入框
背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...
- 无法发布-旧项目发布时出现:该项目中不存在目标“GatherAllFilesToPublish”。
在项目文件夹下面找到 xxxx.csproj 文件,使用 VisualStudio Code 打开(或者任意编辑器,VisualStudio 可能无法编辑) 将以下节点进行更改 <Import ...
- Mysql学习(四)之通过homebrew安装mysql后,为什么在系统偏好设置里没有mysql
原因 用brew install packagename是用来安装命令行工具的,一般不可能影响到图形界面. mysql官方文档是通过dmg文件安装的: The MySQL Installation P ...