vue computed、vue watch、组件、父子组件、模板分离、prop传值、emit传值

一、computed 和 methods
computed 依赖缓存
methods每次都重新执行
除此以外注意html中调用的写法上的不同：

//箭头写法，传递this
computed: {
    totalPage: _this => _this.tableList.length,fileName: _this => _this.dataForm.file.length ? _this.dataForm.file[0].raw.name : null},

二、watch监控
watch可以提取到每一次变化发生时，变化后的值和变化前的值

三、组件
（语法知识点：template中的内容如果有很多条需要用一个大<div>......</div>包裹起来。）
3.1创建构造器+注册组件

3.2语法糖
Vue.component('标签名',{template:'<div>......</div>'})

在Vue实例里添加compoents:{'标签名':{template:'<div>......</div>'}}

四、父子组件(用语法糖版本)

五、模板分离
5.1template

5.2script type=“text/x-template”

六、组件里创建变量

但是要注意这样一个错误：
图2与图1的区别在于，图2的返回值是一个对象，图1的返回值是一个值。对于数据的存储，对象会返回那个对象的地址，而如果仅仅是个值就会新创建一个对象取其地址，每次的创建都是不同的对象不同的地址。
这也是为什么data要写成data()的原因，data是一个function而不是一个属性

七、父组件向子组件传值props

八、子组件向父组件传值emit
1监控鼠标点击事件click→2子节点执行click1方法（emit发射被接收的事件名和数据）→3父节点接收clicked事件（带数据）→4执行change方法

注：为什么④change不是change（msg），因为root组件下没定义msg，msg只是被存在root组件下，可以被方法调用，但是我们不能调用，这里还没找到更好更对称的写法

例1：子传父+信息提取

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><div id="app"><h1>您点击的是{
    {
    msg}}</h1><html-button v-on:itemclick="change1"></html-button>
</div><template id="btn"><div><button v-for="item in btnmsg" v-on:click="click1(item)">{
    {
    item.name}}</button></div>
</template><script>Vue.component('html-button',{
    template:'#btn',data(){
    return{
    btnmsg:[{
    id:'1',name:'yi'},{
    id:'2',name:'er'},{
    id:'3',name:'san'},{
    id:'4',name:'si'},]}},methods:{
    click1(item){
    this.$emit('itemclick',item )}}})new Vue({
    el: '#app',data:{
    msg:''},methods:{
    change1(item){
    this.msg=item.id}}})
</script>