vue入门(二)export default常用代理,method和data,created、computed
vue中export default里面常用的代理,声明变量,方法等
·
上一章:vue入门(一)搭建vue项目,基础显示,指令
下一章:vue入门(三)事件(方法)处理、侦听器、模板引用
一、在每个vue中需要定义的代理:
“代理”即是在export default中可以被定义,之后在渲染时拿来用的一个东西,比较常用的是data和method,也就是变量和方法,还有一些生命周期钩子内的方法也可以写在export default里:
1.data()
页面需要用到的变量
export default({
data(){
return{
buttonText:'button1'
}
}
})
2.methods
页面需要用到的方法
export default({
methods:{
test(){
alert('234');
}
}
})
每个代理之间要用逗号隔开,注意,methods的写法和其他代理略有不同,在methods里面声明的方法写成和js方法一个形式就可以了,省略function
如果需要在methods的方法里调用data,需要写成this.xxx
另外,vue的更新并不是随时随地的,vue会缓存你的更改,然后等到下一周期统一更改。
nextTick(()=>{
...
})
3.created()
如果一个组件要被多次引用,可能存在一些函数内部状态相同的情况,为了防止这种情况发生,该组件的方法可以写在create里面:
export default {
created(){
this.myfun = myfun(this.click)
}
}
click是methods中的一个方法
4.计算属性 computed:
computed和data一样,是用来存放属性的,但写法略有不同,computed主要放的是需要用data计算出的属性
在export default中:
computed:{
clickCount(){
return this.count*100; //count是data中的一个属性,当count变化时,clickCount也会变化
}
}
html:
<span>点击次数*100={{ clickCount }}</span>
- 计算属性和方法的区别:
vue在这里举了一个例子,在methods里定义了一个返回同样值的方法,呈现出的结果也是相同的。然而他俩的区别是,计算属性值会基于其响应式依赖被缓存。这句是文档里的原话,很难看懂,说人话就是,计算属性,有改变的话,先放缓存里,等到下一次你需要更新的时候,再更新;而方法,是页面渲染时,再更新。这两个本质上的区别,就是对内存的压力大不大。如果你有一个特别大的数据量,需要循环多次并作计算,页面容易卡住的话,再用计算属性。
更多推荐
已为社区贡献3条内容
所有评论(0)