Detailed interpretation of vue reconstruction technology

This article mainly introduces the key points and summary of Vue project reconstruction technology. Now I will share it with you and give you a reference.

Preface

I’ve been too busy recently and haven’t updated my blog for a long time. Taking a break from my busy schedule today, I would like to briefly summarize some of the technical points of the recent Vue project reconstruction.

vue data is updated, but the view is not updated

We often encounter this problem. Generally, when vue data is assigned, the vue data changes, but the view is not updated. . This is not the technical point of project reconstruction, let’s share with you the usual solution of vue2.0!

The solution is as follows:

1. Assign value through vue.set method

Vue.set(数据源, key, newValue)

2. Through Array.prototype.splice method

Data source.splice(indexOfItem, 1, newValue)

3. Modify the length of data

Data source.splice(newLength)

4.Mutation method

Vue.js wraps the mutation methods of the observed array, so they can trigger view updates. The wrapped methods are:

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

prop object array application

In JavaScript, objects and arrays are reference types, pointing to the same memory space. If prop is an object or array, changing it inside a child component will affect the state of the parent component. Taking advantage of this, when we change the prop array or object in the child component, the parent component and all places where the data in the prop is applied will change. I have written an article about js deep copy and shallow copy before. If you are interested, take a look. In fact, the principles are the same.

The case is as follows:

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

All places applied to itemData will change!

Vue will not give a warning in the console for the above change of prop. If we completely change or assign a prop, the console will give a warning! Quoting the official solution 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 calculated property, process the value of prop and return:

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

Some pitfalls of v-model

In fact, v-model and sync are some syntactic sugars. I have introduced them in articles before, and you can also find similar ones on the official website. Case!

v-model Sometimes when the data is undefined, no error will be reported, so be sure to note that v-model cannot be undefined, otherwise there will be some inexplicable problems!

Refactoring - Creation of dynamic components

Sometimes we have many similar components with only a little difference. We can write such similar components in In the configuration file, dynamically create and reference components

Method 1: Use component with is

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

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

Method 2: Create

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart.components[_type] through the render method ["attr"] This is dynamically configured in the configuration file. When type is clicked, it will change and the attr attribute under different types will be taken!

Public attribute extraction

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

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

You can use the above depth monitoring. If it needs to be executed immediately during initialization, we can use immediate execution monitoring!

require dynamic loading of dependencies

We can use the require synchronization feature to dynamically load dependencies in the code. For example, in the echart theme below, we can dynamically load it when we click to switch. !

require("echarts/theme/"+ data.theme);

The import loading should be placed in the head. During initialization, the default theme can be loaded with import!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Get the value method of the default selected radio button in angularjs (detailed tutorial)

Through angularJS How to use radio to achieve one of the two options (detailed tutorial)

Comprehensive interpretation of cli in vue (detailed tutorial)

The details are Your interpretation of vue-cli 3.0 new features (detailed tutorial)

The above is the detailed content of Detailed interpretation of vue reconstruction technology. For more information, please follow other related articles on the PHP Chinese website!