The difference between applet and Vue writing

The main differences between small programs and Vue writing methods are as follows:

1. The syntax is different: Applets use WXML, WXSS, and JS, while Vue uses HTML, CSS, and JSX.

2. The data binding methods are different: applets use two-way data binding, while Vue uses one-way data flow.

   • 1) In the applet, you need to use e.currentTarget.dataset.* to get it, so as to complete the parameter transfer
   • 2) Vue only needs to pass in the passed parameters as formal parameters in the triggered event

3. Different componentization methods: the componentization method of applets is based on templates and styles, while the componentization method of Vue is based on components.

4. Different life cycles: The life cycles of applets and Vue have some similarities, but there are also some differences.

   • 1) Small program life cycle: onLoad page loading, onShow page display, onReady page rendering completed for the first time, onHide page hiding, onUnload page unloading
   • 2) Vue life cycle: data, mounted, beforeupdate, updated, beforedestory, destroyed

5. The routing method is different: the routing method of the applet is based on the page stack, and the routing method of Vue is based on the URL.

6. The development tools are different: Mini programs need to be developed and debugged using WeChat developer tools, while Vue can be developed and debugged using any development tool that supports Vue.

7. Showing and hiding elements are different

   • 1) Use wx-if and hidden control elements to display and hide in the applet
   • 2) Use v-if and v-show in Vue to control the display and hiding of elements

8. Parent-child component communication is different:

   • 1) The creation of subcomponents is different:
     a. In vue: write subcomponents, introduce parent components through import, register in components, use in templates
     b, in applets: write subcomponents, in the json file of subcomponents, Declare this file as a component, in the json file of the parent component, fill in the component and path of the subcomponent in usingComponents, and directly reference it in the parent component

   • 2) Parent and child components pass parameters differently
     a. In Vue: in the parent component, a value is passed in through v-bind on the child component, and the child component receives
     b through props. In the applet: directly assign a value to a in the parent component Variables, in the properties of the subcomponent, receive the passed value

   • 3) The parent component wants to call method
     a of the child component, add id or class to the child component in the applet, then find the child component through this.selectComponent, call the child component method
     b, add a ref to the child component in Vue, pass this The value of .refs.ref gets the subcomponent to call any method in the subcomponent

In general, there are many differences between applets and Vue, but they are both modern front-end development technologies with their own advantages and applicable scenarios. A technology stack that developers can 自己choose according to their needs and technical level 适合自己.