Shulou(Shulou.com)06/03 Report--

This article is to share with you the content of a sample analysis of the technical points of vue project refactoring. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Vue data update, view not updated

We often encounter this problem, usually when the vue data is assigned, the vue data changes, but the view is not updated. This is not the technical point of project refactoring, but also share with you the usual solutions of vue2.0!

Solutions are as follows:

1. Assign values through vue.set

Vue.set (data source, key, newValue)

2. Through Array.prototype.splice method

Data source .splice (indexOfItem, 1, newValue)

3. Modify the length of the data

Data source .splice (newLength)

4. Variation method

Vue.js wraps the variation methods of the observed array, so they can trigger view updates. The methods to be packaged are:

Push () pop () shift () unshift () splice () sort () reverse ()

Prop object array application

In JavaScript, objects and arrays are reference types that point to the same memory space. If prop is an object or array, changing it within a child component will affect the state of the parent component. Taking advantage of this, we change the prop array or object in the child component, the parent component, and everything that is applied to the data in the prop. I have written a js deep copy and shallow copy article, interested to take a look, in fact, the principle is the same.

The examples are as follows:

Export default {components: {}, data () {}, props: {itemData: Object}, methods: {}}

Everything that is applied to itemData will change!

The above change prop,Vue will not give a warning on the console, if we completely change or assign a prop, the console will issue a warning! Citing the official solution is as follows:

1. Define a local variable and initialize it with the value of prop:

Props: ['initialCounter'], data: function () {return {counter: this.initialCounter}}

2. Define a calculation attribute, process the value of prop and return:

Props: ['size'], computed: {normalizedSize: function () {return this.size.trim () .toLowerCase ()}}

Some pits of v-model

In fact, v-model and sync are grammatical sugars, which I have introduced before, and similar cases can be found on the official website!

V-model data is sometimes undefined, will not report an error, so, we must note that v-model can not be undefined, otherwise there are some inexplicable problems!

Refactoring-creation of dynamic components

Sometimes we have a lot of similar components, only a little bit different, we can write such similar components into the configuration file, dynamically create and reference components

Method 1: use component and is together

By using reserved elements and dynamically binding their is features, you can dynamically switch multiple components at the same mount point:

Var vm = new Vue ({el:'# example', data: {currentView: 'home'}, components: {home: {/ *... * /}, posts: {/ *... * /}, archive: {/ *... * /})

Method 2: create through the render method

Export default {data () {return {};}, render: function (createElement) {let _ type = bi.chart.data.type; let _ attr = bi.chart.components [_ type] ["attr"]; return createElement (_ attr, {props: {}});}

Bi.chart.components [_ type] ["attr"] this is dynamically configured in the configuration file. It will change when type is clicked, and will take the attr attribute under different type!

Public attribute extraction

In our projects, we often use a lot of state or data, we can extract a lot of public data and put it into an object, and later we can listen for changes in this data object. Save or obtain data.

C: {handler: function (val, oldVal) {/ * * /}, deep: true}, / / the callback will be called immediately after listening starts d: {handler: function (val, oldVal) {/ *... * /}, immediate: true}

You can use the above in-depth monitoring. If the initialization is to be performed immediately, we can use immediate monitoring!

Require dynamic loading dependency

We can use the require synchronization feature to dynamically load dependencies in the code, such as the following echart theme, which can be loaded dynamically when we click to switch!

Require ("echarts/theme/" + data.theme)

Import loading should be placed in the header, and when initializing, you can load the default theme with import!

Thank you for reading! This is the end of the article on "sample analysis of technical points of vue project refactoring". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.