update try catch when set target.proto (fix #9329) #10117

daydream-like · 2019-06-07T18:12:04Z

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

If yes, please describe the impact and migration path for existing applications:

when we use mobx,when the Proxy property is array,set proto return false,then put the Proxy Object to vue data, the vue application will be crashed!

The PR fulfills these requirements:

It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
New/updated tests are included

If adding a new feature, the PR's description includes:

A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
error
"TypeError: 'set' on proxy: trap returned falsish for property 'proto'"

my code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <ul v-for="role in role">
            {{role.title}}
            {{role.name}}
        </ul>
    </div>
    <script>
        const data = mobx.observable({
            name: 'like',
            age: 1,
            role: [{
                title: 'student',
                name: "111"
            }, {
                title: 'student2',
                name: "222"
            }]
        })
        var app = new Vue({
            el: '#app',
            data:data
        })

    </script>

</body>

</html>

vue code

 /**
   * Augment a target Object or Array by intercepting
   * the prototype chain using __proto__
   */
  function protoAugment (target, src) {
    /* eslint-disable no-proto */
    target.__proto__ = src;
    /* eslint-enable no-proto */
  }

mobx code

set: function (target, name, value) {
            if (name === "length") {
                target[$mobx].setArrayLength(value);
                return true;
            }
            if (typeof name === "number") {
                arrayExtensions.set.call(target, name, value);
                return true;
            }
            if (!isNaN(name)) {
                arrayExtensions.set.call(target, parseInt(name), value);
                return true;
            }
            return false;
        },

when mobx check the name is ' proto', will return false to protect other code to modify it!
but vue modify it --> target.proto = src;

posva · 2019-06-07T18:16:28Z

Ah, now I get what you are trying to fix, it's #9329

It wasn't clear at all without any description and no reference to the original issue

I still don't know if the fix should be in mobx side or here

daydream-like · 2019-06-07T18:56:11Z

@posva Thank you for your fast reply , it's my description

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <ul v-for="role in role">
            {{role.title}}
            {{role.name}}
        </ul>
    </div>
    <script>
        const data = mobx.observable({
            name: 'like',
            age: 1,
            role: [{
                title: 'student',
                name: "111"
            }, {
                title: 'student2',
                name: "222"
            }]
        })
        var app = new Vue({
            el: '#app',
            data:data
        })

    </script>

</body>

</html>

error

Uncaught TypeError: 'set' on proxy: trap returned falsish for property '__proto__'

vue code

 /**
   * Augment a target Object or Array by intercepting
   * the prototype chain using __proto__
   */
  function protoAugment (target, src) {
    /* eslint-disable no-proto */
    target.__proto__ = src;
    /* eslint-enable no-proto */
  }

mobx code

  var arrayTraps = {
        get: function (target, name) {
            if (name === $mobx)
                return target[$mobx];
            if (name === "length")
                return target[$mobx].getArrayLength();
            if (typeof name === "number") {
                return arrayExtensions.get.call(target, name);
            }
            if (typeof name === "string" && !isNaN(name)) {
                return arrayExtensions.get.call(target, parseInt(name));
            }
            if (arrayExtensions.hasOwnProperty(name)) {
                return arrayExtensions[name];
            }
            return target[name];
        },
        set: function (target, name, value) {
            if (name === "length") {
                target[$mobx].setArrayLength(value);
                return true;
            }
            if (typeof name === "number") {
                arrayExtensions.set.call(target, name, value);
                return true;
            }
            if (!isNaN(name)) {
                arrayExtensions.set.call(target, parseInt(name), value);
                return true;
            }
            return false;
        },
        preventExtensions: function (target) {
            fail("Observable arrays cannot be frozen");
            return false;
        }
    };

daydream-like · 2019-06-08T17:49:39Z

@posva thanks for you replay, and now what should i do ?

fix:use mobx ，when Proxy property is array not allowed modify __proto__

abc88ab

daydream-like changed the title ~~fix:when users use mobx and vue ， Proxy property is array ,the mobx not allowed modify __proto__,put it to vue data ,then app will be crashed!~~ update try catch when set target.__proto__ (fix #3899) Jun 8, 2019

daydream-like changed the title ~~update try catch when set target.__proto__ (fix #3899)~~ update try catch when set target.__proto__ (fix #9329) Jun 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update try catch when set target.proto (fix #9329) #10117

update try catch when set target.proto (fix #9329) #10117

daydream-like commented Jun 7, 2019 •

edited

Loading

posva commented Jun 7, 2019

daydream-like commented Jun 7, 2019

daydream-like commented Jun 8, 2019

update try catch when set target.__proto__ (fix #9329) #10117

Are you sure you want to change the base?

update try catch when set target.__proto__ (fix #9329) #10117

Conversation

daydream-like commented Jun 7, 2019 • edited Loading

posva commented Jun 7, 2019

daydream-like commented Jun 7, 2019

daydream-like commented Jun 8, 2019

update try catch when set target.proto (fix #9329) #10117

update try catch when set target.proto (fix #9329) #10117

daydream-like commented Jun 7, 2019 •

edited

Loading