SOURCE

const vm1 = new Vue({
  el: '#app1',
  data: {
    title: "2020"
  }
})
//设置计时器，可以使用vm1、vm2
// setTimeout(()=>{
//   vm1.title='我通过Timmer改变了'
// },1000)
//两个Vue实例
const vm2 = new Vue({
  el: '#app2',
  data: {
    title: "好妹妹"
  },
  methods: {
    changeTitle: function() {
      //vm2下的title改变了
      //console.log(this===vm2)结果为：true
      // this.title='title改变了'
      vm1.title = "title改变了"
      //将vm1下的title改变了；用两个变量来分别接受两个Vue实例，可以方便跨实例的使用
    }
  }
})
vm2.$refs.my.innerText='啦啦啦';

<!--可以创建多个Vue对象，互补干扰-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app1">
  <p>
    {{title}}
  </p>
</div>
<div id="app2">
  <p ref="my">
    {{title}}
  </p>
  <button @click="changeTitle">
    按钮
  </button>
</div>
<!-- Object.defineProperty() 实现属性的get与set；将内容显示到dom节点上-->

/* 注：
Vue实例中：
$el:用来存储当前Vue控制的html代码块；
_data:用来存储传入的data{}；保存所有传过来的参数的对象；
$refs{}:想获取的dom节点;
虚拟dom
*/
/* 
重点：Vue实例的生命周期：
卸载后，不能进一步更新；因为Vue已经销毁（无效了）
*/