Vue2.0思考一

（原创）此文章是本人初步理解关于Vue的MVVM模式、父子组件通讯、生命周期、计算属性、方法及侦听器的记录笔记。

MVVM模式

• m（模型层）v（视图层）p（控制器）

• m（模型层）v（视图层）vm（ViewModel）

• 与mvp区别，没有p层
• 方便操做数据
• 重点在模型层
• 面向数据进行开发
• 关于ViewModel
• 虚拟DOM
• object.defineproperties()

前端组件化思惟及通讯

• 父组件向子组件传值

// 父组件
<template>
  ...
  <todo-item :content="item" v-for="(item,index) in list" :key="index"></todo-item>
  ...
</template>

<script>
import TodoItem from './comps/TodoItem'
...
  components: {
    TodoItem,
  },
  data () {
    return {
      todoValue: '',
      list: []
    }
  },
  methods: {
    handleBtnClick() {
      this.list.push(this.todoValue)
      this.todoValue = ''
    }
  }
}
</script>

// 子组件
<template>
  <li>{{content}}</li>
</template>

<script>
export default {
  name:'TodoItem',
  props: ["content"]
}
</script>

• 子组件向父组件传值

// 父组件
<template>
....
  <todo-item :content="item"
    :index = "index"
    v-for="(item,index) in list"
    :key="index"
    @delete="handleItemDelete">
  </todo-item>
  ...
</template>

<script>
import TodoItem from './comps/TodoItem'
export default {
  name: 'app',
  components: {
    TodoItem,
  },
  data () {
    return {
      todoValue: '',
      list: []
    }
  },
  methods: {
    ....
    handleItemDelete(index) {
      console.log(index)
      this.list.splice(index, 1)
    }
  }
}
</script>

<template>
  <li @click="handleItemClick">{{content}}</li>
</template>

<script>
export default {
  name:'TodoItem',
  props: ["content", 'index'],
  methods: {
    handleItemClick () {
      this.$emit("delete", this.index) // 子向父
    }
  }
}
</script>

模板语法

• 插值表达式
• v-html（识别html片断），指令
• v-text
• 等其余v-(= js表达式)指令

计算属性，方法，侦听器

• 计算属性

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  // 计算属性，内置缓存
  computed: {
    fullName() {
      console.log("计算了一次");
      return this.firstName + this.lastName;
    }
  }
};
</script>

• 缓存机制

若依赖值未发生改变，则不会从新计算

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  // 计算属性，内置缓存
  computed: {
    fullName() {
      console.log("计算了一次");
      return this.firstName + this.lastName;
    }
  }
};
</script>

• 方法

缺点：无缓存机制，性能低

<template>
  <div>{{fullName}}{{age}}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28,
      fullName: ""
    };
  },
  // 侦听器
  watch: {
    firstName() {
      console.log("计算了一次");
      this.fullName = this.firstName + this.lastName;
    },
    lastName() {
      console.log("计算了一次");
      this.fullName = this.firstName + this.lastName;
    }
  }
};
</script>

• 侦听器
• 不相关内容发生改变，不会触发

• 监听内容改变，会触发

<template>
  <div>{{fullName}}{{age}}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28,
      fullName: ""
    };
  },
  // 侦听器
  watch: {
    firstName() {
      console.log("计算了一次");
      this.fullName = this.firstName + this.lastName;
    },
    lastName() {
      console.log("计算了一次");
      this.fullName = this.firstName + this.lastName;
    }
  }
};
</script>

• 计算属性的setter和getter

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const arr = value.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];
      }
    }
  }
};
</script>