Object.assign problem

looking at the Vue official website tutorial, there are the following suggestions for adding multiple attributes:

= split line =
if you want to add new responsive attributes, don"t be like this:

Object.assign ( vm.userProfile , {
age: 27,
favoriteColor: "Vue Green"
})
you should do this:

vm.userProfile = Object.assign ( {} , vm.userProfile , {
age: 27,
favoriteColor: "Vue Green"
})
= split line =

is there a difference between the two ways of writing? It will destroy vm.userProfile anyway

Mar.01,2021

the difference is that if vm.userProfile is undefined, an error will be reported in the first case.
there are two situations that change vm.userProfile, but you can understand that the first is to add {age: 27 favoriteColor: 'Vue Green'} to vm.userProfile after traversing without changing the address pointed to by the original vm.userProfile, and the second is to add vm.userProfile and {age: 27 favoriteColor:' Vue Green'} to this new {} after traversing, and vm.userProfile actually points to a new address.
this is the simplest comparison:

//  a === vm.userProfiletruevm.userProfile
var a = Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
// b === vm.userProfile false
var b = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

because I haven't used vue, I don't know what kind of considerations are involved in vue. But if you are in react, the front and back vm.userProfile are different, so you can compare the difference between the two and then re-render the component.

actually, it's not impossible. If you look at the official website, the wording of the document is also suggestion . The specific reason for doing this is because it follows the development concept of one-way data flow, and most of the current mvvm frameworks follow f (data) = > state . If you make changes directly on the same vm, it may cause unpredictable changes to pages that have been rendered with this vm as a data source, and it will be more difficult to debug in more complex applications.

Previous: The result of using VS Code in debugging is not consistent with that of webStrom.

Next: C language problem linked list

Import () dynamic loading error report
this error occurs when the foreground dynamically loads the components provided by the background the error is as follows: Exception: TypeError: caller , callee , and arguments properties may not be accessed on strict mode functions ...

Vue.js es6 import

Mar.04,2021
What if you don't recognize import form in the webstorm editor?
as shown in the figure, the recognition es6 syntax is set, but import vueAwesomeSwiper form vueAwesomeSwiper always reports an error; and no matter what file is referenced in this way, it will report an error ...

Front-end-framework javascript webstorm vue.js es6

Mar.05,2021
Vue promise
data request uses axios method of requesting data print out, first execute the new acquisition data, and then perform the re-acquisition data, so that the data is still the same as before. Is there any way to add the acquisition data after the ...

Vue-resource vue.js es6 javascript

Mar.10,2021
The problem of how to write export const in vue
in a vue template referenced by a rails project, when reading the code to find data, it is found that there is a data that comes from this export const activeFile = state => state.openFiles.find(file => file.active) || null; I don t understand ...

Vue.js es6 const

Mar.18,2021
What does the function-style code that begins with brackets in mutations.js 's export default mean?
Secondary development (undocumented and unaccompanied) sees a string of in the code related to one of the vue modules in the project. types.SET_ACTIVE_TAB I found it in the reference file mutation_types.js . The result is . export default { S...

Vue.js es6 javascript

Apr.25,2021
Newcomers have just begun to learn vue, error reporting Cannot find element:. TechnologyChinese
the newcomer just started to learn that vue, wants technology_Chinese variable display technology, technology_English variable display develop, error, how to solve? import Vue from vue dist vue.common.js ; <template> <div class="tit...

Vue.js es6

Jun.18,2021
Es6 Arrow expression this
for example, I wrote const fn = () = > { this in test.js how to get this this to get the vue object? } export default fn then in the vue file import test from test test.fn.bind (this) () but what if the this in fn is not a pointing vue ob...

Vue.js es6 javascript

Aug.17,2021
Vue introduces an object through import, assigns the object to data, and then asynchronously modifies the value of the property of the object in data. Vue cannot listen.
vue introduces an object through import, assigns the object to data, and then asynchronously modifies the value of the property of this object in data. Vue cannot listen . this object has the following format: import { staticObj } from . a.js dat...

Vue.js es6

Oct.28,2021
What does @ method name / component name mean in react?
as shown in the figure, what does it mean to use @ plus the component name after introducing the component above? import React from react import ReactDom from react-dom import queryString from query-string import { connect } from react...

Vue.js es6 react.js

Jan.17,2022
There are some metaphysical problems in the introduction of import.
undefined appears when import introduces objects the following actions make sure there is no problem with the directory api user.js 1 import Http from @api base http ; console.log(Http) undefined 2 import Http from @api a http ; consol...

Vue.js es6

Mar.05,2022