Vue模板引擎框架不被关注到的机制讲解和Vue生命周期

先看一下VUE模版的最佳实践

  
  
  
  



  

    
{
    {msg}}
  
  

2.其中Data返回的是一个对象，Vue为什么这样设计呢？

1-1：为了解释这个谜题 我们看下面这段代码

（1）：第一种是 vue里面 尤雨溪设计的用法

function a() {
            return {
                name:'cluo',
                age:18
            }
        }
        let vuecomponent1 = a ()
        let vuecomponent2 = a ()
        let vuecomponent3 = a ()
        vuecomponent1.name = '梅西'
        console.log(vuecomponent1)
        console.log(vuecomponent2)
        console.log(vuecomponent3)

1. 这里返回的是一个对象
2. 每赋值一次，都会重新开辟一个内存空间，当更改其中一个中的值得时候，其他都不变，互不干扰。
   

这里的代码可以这样理解

（2）：第二种是我们想试验的是否可行的用法

const obj = {
            name:'cluo',
            age:18
        }
        function a(){
            return obj
        }
        let vuecomponent1 = a()
        let vuecomponent2 = a()
        let vuecomponent3 = a()
        vuecomponent1.name ='梅西'
        console.log(vuecomponent1)
        console.log(vuecomponent2)
        console.log(vuecomponent3)

这里的代码可以这样理解

1. 这个就是引用的，obj只开辟了一个内存空间，每声明一个就是指针指向了那片内存空间。
2. 当修改其中一个的时候，obj内存空间的值也对应修改
3. 运行结果如下：