【Vue.js】vue实例（属性/方法）

Vue实例

vue实例的创建和作用

new Vue({
  el:'#root',
  template:'<div>this is content </div>'
})

new实例化一个vue对象，将template的内容渲染挂载到id=root的节点上

挂载节点同样可以这样写:
const app=new vue({
  //el:'root',
  template:'<div>this is content </div>'
})
app.$mount("#root")

vue实例的属性

1. app.$data:可以取到vue对象中的data值

2. app.$props：

3. app.$el：可以去到vue对象的指定节点

4. app.$options：new实例传进去的值都是options

   app.$options.render = (h) => {

   ​ return h(‘div’,{},‘new render function’)

   }//会在初始化之后，下一次改变的时候 渲染生效

5. app.$root：vue是树状结构往下渲染的，是最上层的根节点

6. app.$children:使用组件时

7. app.$slots/app.$scopedSlots:插槽

8. app.$ref:快速定位到某一个节点

9. app.$isServer:服务端渲染运行还是在客户端做

vue实例的方法

1. 监听
   app.$watch('text', (newText, oldText) => {
      console.log(`${newText}:${oldText}`)
   })
   注销监听
   const unwatch=
         app.$watch('text', (newText, oldText) => {
             console.log(`${newText}:${oldText}`)
         })
   
   setTimeout(() => {
     unwatch()
   },2000)
   

2. 事件监听
   app.$on('test', () => {
     console.log('test emited')
   })
   
   app.$emit('test')
   
   只触发一次
   app.$once('test', () => {
     console.log('test emited')
   })
   setInterval(() => {
     app.$emit('test')
   },1000)
   

3. // 强制整个组件重新渲染
   app.$forceUpdate()
   
   原因：vue是响应式的框架，如果data中未声明变量，即使赋值成功，不会重新渲染到页面上，html没有任何变化。但不建议使用，程序性能低
   
   同样的效果
   //设置值
   app.$set(app.obj, 'a', i)
   //删除值
   app.$delete()
   

4. //下次Dom更新之后执行
   app.$nextTick([callback])
   将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待Dom更新