你不知道的vue小技巧

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 >>

Vue.nextTick可以返回Promise对象 cn.vuejs.org/v2/api/#Vue…

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
  // DOM 更新了
})

使用Vue.set添加属性触发响应式更新，包括数组内单个元素的属性。（Vue.delete类似）cn.vuejs.org/v2/api/#Vue…

const app = new Vue({
  el:'#app',
  data: {
    list: [
      { a: 1, b: 2 },
      { a: 2, b: 3 },
      { a: 3, b: 4 }
    ]
  },
  template:`
  <div>
      <ol>
          <li v-for="(item, index) in list">{{item.a}}-{{item.b}}-{{item.c}}</li>
      </ol>
  </div>
  `
});

setTimeout(function () {
  console.log('set app list');
  Vue.set(app.list[1], 'c', 3);

  // app.list[1].c = 3;
},3000);

使用propsData进行组件实例化传递props cn.vuejs.org/v2/api/#pro…

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

使用vm.$mount()进行组件实例转化为Dom对象 cn.vuejs.org/v2/api/#vm-…

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

使用v-cloak来屏蔽初次编译显示未渲染的文本的问题 cn.vuejs.org/v2/api/#v-c…

element-ui中v-infinite-scroll不支持async方法，不转义将需要手动包装一层function。