初次使用vue时的常见错误，模板不显示；属性变化不触发更新；共用js定义组件

    模板编译器

    按照官方指南并使用组件的内联模板，只会显示空白的内容，我之前的《vue引入插件》博文中遇到过在main.js中直接用

const Foo = { template: '<div>foo</div>' };

    这样我是出现了未渲染成功的组件情况，审查元素是用了一个注释便签代替的”<!--function(e,n,r,o){return ln(t,e,n,r,o,!0)}-->“。使用渲染函数render或 组件定义模板时就能正常显示，当时我就是单独foo.vue这样正常显示，现在想来是编译后形成render的方式渲染。原因就是我当时使用的是npm引入的vue，并不是script标签直接引入的vue，我用的npm引入的vue是不带模板编译器的。如果不使用render非要使用字符串模板动态生成，需要script引入vue并且设置别名，效率也会降低。

    属性变化

    vue的组件属性的getter和setter被覆盖，用于通知虚拟树更新数据。

var vm = new Vue({
  el: '#vm',
  template: `<div>{{ item.count }}<input type="button" value="Click" @click="updateCount"/></div>`,
  data: {
    item: {}
  },
  beforeMount () {
    this.$data.item.count = 0;
  },
  methods: {
    updateCount () {
      // JavaScript object is updated but
      // the component template is not rendered again
      this.$data.item.count++;
    }
  }
});

    在上面的代码中，count的修改是不会触发虚拟树的更新，因为在定义时，item并不包括count属性，没有被覆盖getter和setter。

beforeMount () {
  // 通过触发item的变化，让item对象里的属性都自动被覆盖getter和setter
  this.$data.item = {
    count: 0
  };

  // 主动指定count属性被覆盖getter和setter
  this.$set(this.$data.item, 'count', 0);
  
  //或者
  Vue.set(this.$data.item, 'count', 0);
}

    组件设置组件名

    设置组件名对于出错时，堆栈中显示能快速定位错误位置。

    多个组件不能公用同一个组件定义js对象

    不要为了方便，将相同的组件定义提取成一个单独的js，然后多个组件引用。

//user.js
const User = {
  data: () => ({
    user: {
      name: 'John Doe'
    }
  })
};
export default User;

//user-read-only.vue
<template><div>{{ user.name }}</div></template>
<script src="./user.js"></script>

//user-read-write.vue
<template><input v-model="user.name"/></template>
<script src="./user.js"></script>


//main.js
import UserReadWrite from './user-read-write.vue';
import UserReadOnly from './user-read-only.vue';

Vue.component('UserReadOnly', UserReadOnly);
Vue.component('UserReadWrite', UserReadWrite);

var vm = new Vue({
  el: '#app',
  template: `<div><UserReadOnly/><UserReadWrite/></div>` //这里希望显示两个不同的组件
});

    组后引入的组件将覆盖前面的引用相同定义文件的组件，最后将渲染显示两个相同的组件readonly。