vue基础（1）--instance对象

熟悉vue的各个api。少走弯路、高效开发。复习一遍，开始~~~ 

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



const app = new Vue({
    // el:"#root",
    template:'<div>{{text}}</div>'',
    data:{
        text:'text'
    }
})
app.$mouont("#root")        //挂在到id为root的节点上

setInterva(()=>{
    app.$data.text +=1      //获取data中数据的方法  $data
},1000)

console.log(app.$data)
console.log(app.$props)
console.log(app.$el)
console.log(app.$options)
app.$options.render=(h)=>{         //重新赋值 render   方法
    return h('div',{},'new render function')
}
console.log(app.$root === app)     //同一个货
console.log(app.$children)         //子组件
console.log(app.$slots)            //插槽
console.log(app.$scopedSlots)      //可以通过这种方式引用插槽
console.log(app.$refs)             //模板的引用,返回节点对象
console.log(app.$isServer)         //服务端渲染时用

const unWatch = app.$watch('text',(newText,oldText)=>{
    console.log(`${newText}:${oldText}`)
})
setTimeOut(()=>{
    unWatch()
},2000)

app.$on('test',(a,b)=>{               //事件监听,跟$emit方法配合使用
    console.log(`test emited'+{a}{b}`)
})
app.$emit('test',(1,2)

app.$once('test',(a,b)=>{             //只监听一次
    console.log(`test emited ${a} ${b})
})

let i=0
setInterval(()=>{
    i++
    app.text +=1
    app.obj.a = i
    app.$set(app.obj,'a',i)
    app.$delete()
    app.$emit('test',1,2)
},1000)

app.$forceUpdate()                     //某个对象上的属性未声明，改变是不会触发响应式的。  
//app.obj.a = 1  可以通过强制刷新， 少用
app.$set(app.obj."a",100)              //补救方案,vue会声明，
app.$delete(app.obj.a)                 //对应删除方案


app.$nextTick({})          //dom渲染完成，下次dom更新的时候调用。有用的方法，调试利器复制代码