Fix comparison with proxy value (#640)

* Fix comparison with proxy value

* Fix lint

Author: dxvladislavvolkov

packages/devextreme-vue/src/core/__tests__/configuration.test.ts

@@ -5,7 +5,7 @@ import Configuration, {
     UpdateFunc
 } from "../configuration";
 
-import { ComponentPublicInstance } from "vue";
+import { ComponentPublicInstance, reactive } from "vue";
 
 function createRootConfig(updateFunc: UpdateFunc): Configuration {
     return new Configuration(updateFunc, null, {});
@@ -177,6 +177,33 @@ it("binds option watchers", () => {
     expect(updateValueFunc.mock.calls[0][1]).toBe(value);
 });
 
+it("should update only when raw value not equal", () => {
+    const updateValueFunc = jest.fn();
+    const $watchFunc = jest.fn();
+    const innerChanges = { prop1: "test" };
+
+    bindOptionWatchers(
+        {
+            updateValue: updateValueFunc,
+            getOptionsToWatch: () => ["prop1"],
+            innerChanges: {}
+        } as any,
+        {
+            $watch: $watchFunc
+        },
+        innerChanges
+    );
+
+    $watchFunc.mock.calls[0][1](reactive(innerChanges).prop1);
+
+    expect(updateValueFunc).toHaveBeenCalledTimes(0);
+
+    $watchFunc.mock.calls[0][1](reactive({ prop1: "test1"}).prop1);
+    expect(updateValueFunc).toHaveBeenCalledTimes(1);
+    expect(updateValueFunc.mock.calls[0][0]).toBe("prop1");
+    expect(updateValueFunc.mock.calls[0][1]).toBe("test1");
+});
+
 describe("initial configuration", () => {
 
     it("pulls value from nested", () => {

packages/devextreme-vue/src/core/configuration.ts

@@ -1,4 +1,4 @@
-import { ComponentPublicInstance as IVue, VNode, VNodeProps } from "vue";
+import { ComponentPublicInstance as IVue, toRaw, VNode, VNodeProps } from "vue";
 import { getOption } from "./config";
 import { IComponentInfo } from "./configuration-component";
 import { getOptionInfo, isEqual } from "./helpers";
@@ -264,8 +264,9 @@ function bindOptionWatchers(
     if (targets) {
         targets.forEach((optionName: string) => {
             vueInstance.$watch(optionName, (value) => {
+                const rawValue = toRaw(value);
                 if (!innerChanges.hasOwnProperty(optionName) ||
-                innerChanges[optionName] !== value) {
+                innerChanges[optionName] !== rawValue) {
                     config.updateValue(optionName, value);
                 }
                 delete innerChanges[optionName];
@@ -293,7 +294,7 @@ function setEmitOptionChangedFunc(
         const props = vueInstance.$props;
         const vnode = vueInstance?.$?.vnode;
         if (hasProp(vueInstance, name) && !isEqual(value, props[name]) && vueInstance.$emit) {
-            innerChanges[name] = value;
+            innerChanges[name] = toRaw(value);
             const eventName = name === "value" && hasVModelValue(vueInstance.$options, props, vnode) ?
                 `update:${VMODEL_NAME}` :
                 `update:${name}`;