Function stateMixin

vue.js:5222–5299

(Vue)

    //数据绑定，$watch方法
    function stateMixin(Vue) {
        // flow somehow has problems with directly declared definition object
        //流在某种程度上与直接声明的定义对象有问题
        // when using Object.defineProperty, so we have to procedurally build up
        //在使用Object.defineProperty时，我们必须循序渐进地进行构建
        // the object here. 这里的对象。
        var dataDef = {};
        //重新定义get 和set方法
        dataDef.get = function () {
            return this._data //获取data中的数据
        };

        var propsDef = {};
        propsDef.get = function () {
            return this._props// 获取props 数据
        };

        {
            dataDef.set = function (newData) {
                //避免替换实例根$data。 使用嵌套数据属性代替
                warn(
                    'Avoid replacing instance root $data. ' +
                    'Use nested data properties instead.',
                    this
                );
            };
            propsDef.set = function () {
                //props 只是可度的数据不可以设置更改
                warn("$props is readonly.", this);
            };
        }
        console.log('==dataDef==')
        console.log(dataDef)


        Object.defineProperty(Vue.prototype, '$data', dataDef);
        Object.defineProperty(Vue.prototype, '$props', propsDef);

        //添加多一个数组数据或者对象数据
        Vue.prototype.$set = set;
        //删除一个数组数据或者对象数据
        Vue.prototype.$delete = del;

        Vue.prototype.$watch = function (expOrFn, //用户手动监听
            cb, // 监听 变化之后 回调函数
            options //参数
        ) {
            var vm = this;
            if (isPlainObject(cb)) { //判断是否是对象 如果是对象则递归 深层 监听 直到它不是一个对象的时候才会跳出递归
                //    转义handler 并且为数据 创建 Watcher 观察者
                return createWatcher(
                    vm,
                    expOrFn,
                    cb,
                    options
                )
            }
            options = options || {};