Differences and comparisons between Vue and WeChat applet

After writing a Vue project and a mini program, I found that the two have many similarities. Here I would like to summarize the similarities and differences between the two.

1. Life Cycle

First post two pictures:

Vue life cycle

Mini Program Life Cycle

In comparison, the hook function of the applet is much simpler.

The hook function of vue will be triggered when jumping to a new page, but the hook function of the mini program will trigger different hooks depending on the page jump method.

• onLoad: page loading

A page will only be called once, and the query parameters called to open the current page can be obtained in onLoad.

• onShow: page display

This function is called every time a page is opened.

• onReady: The initial rendering of the page is completed

A page is called only once, indicating that the page is ready to interact with the view layer.

Please set the interface settings such as wx.setNavigationBarTitle after onReady. See Life Cycle for details.

• onHide: page hidden

Called when navigateTo or bottom tab is switched.

• onUnload: page unload

Called when redirectTo or navigateBack.

Data Request

When requesting data when loading a page, the usage of the two hooks is somewhat similar. Vue generally requests data in create or mounted, while in mini programs, it requests data in onLoad or onShow.

2. Data Binding

When VUE dynamically binds the value of a variable to an attribute of an element, a colon is added in front of the variable:, for example:

 <img :src= "imgSrc" />

Mini Program: When binding a variable value to an element attribute, it will be enclosed in two curly brackets. If no brackets are added, it will be considered a string. Example:

 <image src= "{{imgSrc}}" ></image>

3. List Rendering

Paste the code directly, the two are still somewhat similar

vue:

 <ul id= "example-1" >  
  <li v- for = "item in items" >  
 {{ item.message }}  
 </li>  
 </ul>  
 
 var example1 = new Vue({  
 el: '#example-1' ,  
 data: {  
 items: [  
 { message: 'Foo' },  
 { message: 'Bar' }  
 ] 
  }  
 })

Mini Programs:

 Page({  
 data: {  
 items: [  
 { message: 'Foo' },  
 { message: 'Bar' }  
 ]  
 }  
 })  
 
 <text wx: for = "{{items}}" >{{item}}</text>

4. Showing and hiding elements

In vue, use v-if and v-show to control the display and hiding of elements

In the applet, use wx-if and hidden to control the display and hiding of elements

5. Event Handling

Vue: Use v-on:event to bind events, or use @event to bind events, for example:

 <button v- on :click= "counter += 1" > Add 1</button>  
 <button v- on :click.stop= "counter+=1" >Add1</button> //Prevent event bubbling

In the applet, all events are bound using bindtap (bind+event) or catchtap (catch+event), for example:

 <button bindtap= "noWork" >No work tomorrow</button>  
 <button catchtap= "noWork" >No work tomorrow</button> //Prevent event bubbling

6. Two-way data binding

1. Setting Values

In Vue, you only need to add v-model to the form element, and then bind a corresponding value in the data. When the content of the form element changes, the corresponding value in the data will also change accordingly. This is a very nice point of Vue.

 <div id= "app" >  
 <input v-model= "reason" placeholder= "Fill in the reason" class= 'reason' />  
 </div>  
 
 new Vue({  
 el: '#app' ,  
 data: {  
 reason: ''    
 }  
 })

But there is no such function in the mini program. What should I do?

When the form content changes, the method bound to the form element will be triggered, and then in this method, the value on the form is assigned to the corresponding value in data through this.setData({key:value}).

Here is the code to give you a feel for it:

 <input bindinput= "bindReason" placeholder= "Fill in the reason" class= 'reason' value= '{{reason}}'   name = "reason" />  
 Page({  
 data:{  
 reason: ''    
 },  
 bindReason(e) {  
 this.setData({  
 reason: e.detail.value  
 })  
 }  
 })

When there are many form elements on the page, changing the value is a physical job. Compared with the applet, vue's v-model is so cool.

2. Value

In Vue, get the value through this.reason

In the applet, get the value through this.data.reason

7. Binding event parameters

In Vue, it is very simple to bind events and pass parameters. You only need to pass the data you want to pass as a parameter in the method that triggers the event. For example:

 <button @click= "say('No work tomorrow')" ></button>  
 new Vue({  
 el: '#app' ,  
 methods:{  
 say(arg){  
 consloe.log(arg)  
 }  
 }  
 })

In the applet, you cannot pass parameters directly into the method of binding events. You need to bind the parameters as attribute values ​​to the data-attribute on the element, and then obtain them in the method through e.currentTarget.dataset.* to complete the parameter transfer. Is it troublesome?

 < view class= 'tr' bindtap= 'toApprove' data-id= "{{item.id}}" ></ view >  
 Page({  
 data:{  
 reason: ''    
 },  
 toApprove(e) {  
    let id = e.currentTarget.dataset.id;  
 }  
 })

8. Parent-child component communication

1. Use of subcomponents

In Vue, you need to:

1. Writing subcomponents
2. Introduce it through import in the parent component where it is needed
3. Register in Vue's components
4. Use in templates

 //Subcomponent bar.vue  
 <template>  
 <div class= "search-box" >  
    <div @click= "say" :title= "title" class= "icon-dismiss" ></div>  
 </div>  
 </template>  
 <script>  
 export default {  
 props:{  
 title:{  
 type:String,  
 default : ''    
 }  
 }  
 }, 
 
 methods:{  
 say(){ 
  console.log( 'No work tomorrow' );  
       this.$emit( ​​'helloWorld' )  
 }  
 }
 </script>  
 
 // Parent component foo.vue  
 <template>  
 <div class= "container" >  
    <bar :title= "title" @helloWorld= "helloWorld" ></bar>  
 </div>  
 </template>  
 
 <script>  
 import Bar from   './bar.vue'    
 export default {  
 data:{  
 title: "I am the title"    
 },  
 methods:{  
 helloWorld(){  
 console.log( 'I received the event passed by the child component' )  
 }  
 },  
 components:{ 
  Bar  
 }  
 </script>

In the applet, you need to:

1. Write subcomponents

2. In the json file of the subcomponent, declare the file as a component

 {  
 "component" : true    
 }

3. In the json file of the parent component that needs to be introduced, fill in the component name and path of the imported component in usingComponents

 "usingComponents" : {  
 "tab-bar" : "../../components/tabBar/tabBar"    
 }

4. In the parent component, just import it directly

 <tab-bar currentpage= "index" ></tab-bar>

Specific code:

 // Subcomponent  
 <! --components/tabBar/tabBar.wxml-->    
 < view class= 'tabbar-wrapper' >  
  < view class= 'left-bar {{currentpage==="index"?"active":""}}' bindtap= 'jumpToIndex' >  
    <text class= 'iconfont icon-shouye' ></text>  
 < view >Home</ view >  
 </ view >  
  < view class= 'right-bar {{currentpage==="setting"?"active":""}}' bindtap= 'jumpToSetting' >  
    <text class= 'iconfont icon-shezhi' ></text>  
 < view >Settings</ view >  
 </ view >  
 </ view >

2. Communication between parent and child components

In Vue

The parent component passes data to the child component. It only needs to pass a value through v-bind in the child component. In the child component, the data can be received through props. Example:

 // Parent component foo.vue  
 <template>  
 <div class= "container" >  
    <bar :title= "title" ></bar>  
 </div>  
 </template>  
 <script>  
 import Bar from   './bar.vue'    
 export default {  
 data:{  
 title: "I am the title"    
 },  
 components:{  
 Bar  
 }  
 </script>  
 
 // Subcomponent bar.vue  
 <template>  
 <div class= "search-box" >  
    <div :title= "title" ></div>  
 </div>  
 </template>  
 <script>  
 export default {  
 props:{  
 title:{  
 type:String,  
 default : ''    
 }  
 }  
 }  
 </script>

Child components and parent components can communicate by passing methods and data to the parent component through this.$emit.

In the applet

The communication between the parent component and the child component is similar to Vue, but the mini program does not use v-bind, but directly assigns the value to a variable, as follows:

 <tab-bar currentpage= "index" ></tab-bar>

Here, "index" is the value to be passed to the child component

In the child component properties, receive the passed value

 properties:  
 // Pop-up title  
 currentpage: { // property name  
 type: String, // Type (required), currently accepted types include: String, Number, Boolean, Object, Array, null (indicates any type)  
 value: 'index' // Attribute initial value (optional), if not specified, one will be selected according to the type  
 }
 }

The communication between the child component and the parent component is also very similar to Vue. The code is as follows:

 //In the subcomponent  
 methods: {  
 // Pass to parent component  
 cancelBut: function (e) {  
 var that = this;  
 var myEventDetail = { pickerShow: false , type: 'cancel' } // detail object, provided to the event listening function  
 this.triggerEvent( 'myevent' , myEventDetail) //myevent custom name event, used in parent component  
 },
 }  
 //In the parent component  
 <bar bind:myevent= "toggleToast" ></bar>   
 // Get subcomponent information  
 toggleToast(e){  
 console.log(e.detail)  
 }

If the parent component wants to call the method of the child component

Vue will add a ref attribute to the subcomponent. The subcomponent can be obtained through the value of this.$refs.ref, and then any method in the subcomponent can be called, for example:

 //Subcomponents  
 <bar ref= "bar" ></bar>  
 // Parent component  
 this.$ref.bar.Method of the child component

The mini program adds an id or class to the subcomponent, then finds the subcomponent through this.selectComponent, and then calls the method of the subcomponent. For example:

 //Subcomponents  
 <bar id= "bar" ></bar>  
 // Parent component  
 this.selectComponent( '#id' ).syaHello()

Mini Programs and Vue are very similar in this respect, aren’t they?

9. Nonsense

There are still many places that I haven't written, I will slowly add and simplify them later. I feel that what I wrote is a bit redundant, please don't criticize me!!!

If you find it helpful, please like and collect it.