vue实例说明（this指向）及页面初始化时dom会闪一下的原因

在用vue搭建页面时有一些变量是一开始是空的，页面一挂载mounted就赋值的，如这种情况

html
    <div class="productBox" v-for="(item,index) in prolists" :key="index">
          <p class="productName">{{item.name}}</p>
          <p class="createTime">{{item.createdDate}}</p>
   </div>
js
   var vm=new Vue({
        el:'#globel',
        data:{
            prolists:[]
        },
        created:function(){
           console.log(this.prolists);//空数组对象
           //单页面就没有导入axios
            $.ajax({
                method: "GET",
                url:"xxxxx",
                success:function(result){
                  var prodata=JSON.parse(result);
                  vm.prolists=prodata.data;
                  console.log(this.prolists);//未定义，因为this是ajax实例
                  console.log(vm.prolists);
              }
          });           
        },
        methods:{
        }
    })

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的， Vue 的设计受到了MVVM的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时要经过一系列的初始化过程，在实例生命周期的不同阶段被调用，如 created、 [mounted(https://cn.vuejs.org/v2/api/#mounted)、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
computed、methods、watch将被混入到 Vue 实例中。 this 上下文自动地绑定为 Vue 实例。
一定要弄清楚this的指向问题，如ajax请求里的this为ajax实例而不是vue实例，而定时器里的this是windows所以一般需要在后面bind(this)，所以记住函数中this的指向为谁调用就是谁。
你也可以在 API 文档 中浏览完整的选项列表。

数据赋值前闪一下

在数据被赋值之前页面里可能会先闪现{{item.name}} {{item.createdDate}}然后再被真实数据替代，很丑有木有。
所以说要在数据赋予之前让其隐藏有几种方法：
1、v-cloak

• 不需要表达式

• 用法：

  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

• 示例：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

2、使用v-text
把<p class="productName">{{item.name}}</p>替换成<p class="productName" v-text="item.name"></p>完美解决
3、v-html（不建议）
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
4、v-if 和v-show
根据表达式之真假值，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。
数据赋予前使其为false，之后赋值为true