vue2.0 是通过Object.defineProperty方法完成了数据响应式
    vue3.0是通过Class Proxy完成的数据响应式
    我们还是使用上面的例子，它怎么实现响应式的呢？
    我们来模拟一下，Vue如何通过Object.defineProperty方法来完成数据响应式的
    我们定义一个变量num，试试通过改变num的值能不能改变person实例age的值

    1. <script type="text/javascript">
    2.             var num = 18
    3.             var person = {
    4.                 name: "张三",
    5.             };
    6.             //传入三个元素1.对象 2，属性名称 3，属性值
    7.             Object.defineProperty(person,'age',{
    8.                 value:num,
    9.                 });
    11.             console.log(person)
    13.         </script>
    18. 我们在控制台操作如下：
    20. person
    21. {name: '张三', age: 18}
    22. num = 19
    23. 19
    24. person
    25. {name: '张三', age: 18}
    27. 显然我们失败了，我们再试试能不能通过改变person.age 的值来改变Vue实例属性的值，显然又失败了
    28. person.age = 20 
    29. 20
    30. num
    31. 19

    其实Vue是通过object.defineProperty 方法的set和get函数来实现数据绑定的，而不是把age 直接 等于num这种形式
    image.png

            <script type="text/javascript">
            var num = 18
            var person = {
                name: "张三",
            };
            //传入三个元素1.对象 2，属性名称 3，属性值
            Object.defineProperty(person,'age',{
                get: function getter(){
                    return num
                },
                set: function setter(value){
                    num = value
                },
                });
        </script>

    我们打开控制台，发现age: (…) ，只有你点击…的时候才会显示
    这就说明只有我们点击的时候才会去主动调用…
    image.png
    image.png
    这样就完成了数据绑定
    我们再看一个Vue实例的例子：
    image.png