外部调用Vue实例-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666588

在外部(js中或者其他vue实例中)改变vue实例中的内容

        <div id="app">
     <p>{{ title }}</p>
</div>
<div id="app2">
    <p>{{ title }}</p>
    <button @click = 'changeTitle'>change vm1 title</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const vm = new Vue({
     el : "#app",
     data : {
         title: "我是一个vue实例"
     }
 })

 setTimeout(() => {
 vm.title = "我通过timer改变!"
        }, 1000)

 const vm2 = new Vue({
     el : "#app2",
     data : {
         title: "我是一个vue实例2"
     },
     methods: {
         changeTitle: function() {
             vm.title = "变变变！"
         }
     }
 })
</script>

在以上代码中，把vue实例赋值给一个名字，在其他地方就可以通过该名字调用这个实例的内容，比如在setTimeout中调用，或者是在vm2中调用。

Vue底层

我们打印一下vm2一个实例

        console.log(vm2)

经过处理之后返回了一个对象，对象当中包含我们定义的函数和变量

vue实例中的this指向当前vue实例

        console.log(this === vm2)

返回true

底层数据绑定:

在vm2中点击改变vm中的数据原理:

通过set相对应得Object.defineProperty(vm, "title", { get(){}, set(){} })方法，监听数据，当数据改变对比虚拟DOM，虚拟dom比重排重绘消耗性能低。

Vue中的三个特殊属性:自带$或者_

$el:

存储vue对象，控制html代码

_data:

存储传过来的data，只是引用值

        const data = {
    title: "我是外面的data"
}

const vm2 = new Vue({
    el : "#app2",
    data: data, // 引用外面的data
    methods: {
        changeTitle: function() {
        this.title = "变变变！"
        vm.title = "变变变！"
        console.log(this === vm2)
        console.log( data === this._data )
    }}
})

$refs:{}

保存想获取的dom节点，通过这种方式操作dom节点(一般不使用该方式，都是通过数据方式)

        <!-- html代码 -->
<div id="app2">
    <p ref="myP">{{ title }}</p>
    <button @click = 'changeTitle'>change vm1 title</button>
</div>

        // js代码 
vm2.$refs.myP.innerText = "我想让你改变!"

如果我们自己写的变量中是$开头，那么他们会在哪里？

它会存在_data中

        const data = {
    title: "我是外面的data",
    $name: "fanghuayong",
}

第二个底层:

虚拟dom怎么实现

虚拟dom：使用对象来表示dom是什么

通过js计算旧的dom对象和新的dom对象有什么不同，再改变,js运算比浏览器重排重绘快

生命周期:

new一个Vue实例，会初始化事件，触发beforCreate函数
初始化注入，触发created函数
编译模版
编译渲染后触发beforeMount函数
挂载vm.$el
调用mounted函数(编译完成)
点击触发Mounted函数，如果检测到虚拟dom不同的话触发updated函数(一直工作)
vm.$destroy()方法可以让vue实例死亡，死亡触发beforeDestroy函数
解绑监听、组件等
解绑完触发destroyed函数把vue实例结束

        <div id="app">
        <p>{{ title }}</p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el : "#app",
    data : {
        title: "我是Vue",
    },
 beforeCreate: function() {
 // 完成初始化事件的时候触发
 console.log("beforeCreate")
    },
 created: function() {
 // 绑定完数据触发该函数
 console.log("created")
    },
 beforeMount: function() {
 console.log("beforeMount")
    },
 mounted: function() {
 console.log("mounted")
    },
})

在beforeCreate之前获取不到data数据和methods的方法，在之后才绑定上的

        new Vue({
    el : "#app",
    data : {
        title: "我是Vue",
    },
 beforeCreate: function() {
 console.log(this.title)
    },
 created: function() {
 console.log(this.title)
    },
 beforeMount: function() {
 console.log("beforeMount")
    },
 mounted: function() {
 console.log("mounted")
    },
})

更新和卸载

更新

        <div id="app">
    <p>{{ title }}</p>
    <button @click = "title = '更新数据'">点击更新</button>
    <button @click = "$destroy()">卸载</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            title: "我是Vue",
        },
        beforeCreate: function() {
            console.log(this.title)
        },
        created: function() {
        console.log(this.title)
        },
       beforeMount: function() {
          console.log("beforeMount")
       },
       mounted: function() {
           console.log("mounted")
       },
      beforeUpdate: function() {
         console.log('beforeUpdate')
      },
      updated: function() {
          console.log('updated')
      },
      beforeDestroy: function() {
        console.log("beforeDestroy")
      },
      destroyed: function() {
        console.log("destroyed")
      }
})