vue入门（二）export default常用代理，method和data，created、computed

上一章：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里定义了一个返回同样值的方法，呈现出的结果也是相同的。然而他俩的区别是，计算属性值会基于其响应式依赖被缓存。这句是文档里的原话，很难看懂，说人话就是，计算属性，有改变的话，先放缓存里，等到下一次你需要更新的时候，再更新；而方法，是页面渲染时，再更新。这两个本质上的区别，就是对内存的压力大不大。如果你有一个特别大的数据量，需要循环多次并作计算，页面容易卡住的话，再用计算属性。

上一章：vue入门（一）搭建vue项目，基础显示，指令
下一章：vue入门（三）事件（方法）处理、侦听器、模板引用