小程序与vue.js有哪些不同？

待我称王封你为后i 2022-02-01 00:29 281阅读 0赞

## 前言 ##

> 总结得较完善，文章很长，请备好瓜子观看~

## 1.生命周期 ##

小程序：

**onLoad：页面加载**

一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

**onShow：页面显示**

每次打开页面都会调用一次。

**onReady：页面初次渲染完成**

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如 wx.setNavigationBarTitle请在 onReady之后设置。详见生命周期。

wx.setNavigationBarTitle(\{

title:this.data.titleName

\});

**onHide：页面隐藏**

当 navigateTo或底部tab切换时调用。

**onUnload：页面卸载**

当 redirectTo或 navigateBack的时候调用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

vue.js:

**创建前/后：**

在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

**载入前/后：**

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

**更新前/后：**

当data变化时，会触发beforeUpdate和updated方法。

**销毁前/后：**

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1][]

## 2.数据双向绑定 ##

**1、设置值**

在vue中，只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时， data中对应的值也会相应改变，这是vue非常nice的一点。

<div id="app">
     <input v-model="reason" placeholder="填写理由" class='reason'/>
    </div>
     
    new Vue({
     el: '#app',
     data: {
     reason:''
     }
    })

但是在小程序中，却没有这个功能。那怎么办呢？

当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData(\{key:value\})来将表单上的值赋值给 data中的对应值。

下面是代码，可以感受一下：

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{
       {reason}}' name="reason" />
     
    Page({
    data:{
     reason:''
    },
    bindReason(e) {
     this.setData({
      reason: e.detail.value
     })
     }
    })

当页面表单元素很多的时候，更改值就是一件体力活了。和小程序一比较，vue的 v-model简直爽的不要不要的。

**2、取值**

vue中，通过 this.reason取值。

小程序中，通过 this.data.reason取值。

## 3.父子组件通信 ##

### 1、子组件的使用 ###

在vue中，需要：

1、编写子组件

2、在需要使用的父组件中通过 import引入

3、在 vue的 components中注册

4、在模板中使用

//子组件 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('明天不上班');
      this.$emit('helloWorld')
     }
    }
    </script>
     
    // 父组件 foo.vue
    <template>
     <div class="container">
     <bar :title="title" @helloWorld="helloWorld"></bar>
     </div>
    </template>
     
    <script>
    import Bar from './bar.vue'
    export default{
    data:{
     title:"我是标题"
    },
    methods:{
     helloWorld(){
      console.log('我接收到子组件传递的事件了')
     }
    },
    components:{
     Bar
    }
    </script>

在小程序中，需要：

1、编写子组件

2、在子组件的 json文件中，将该文件声明为组件

{
     "component": true
    }

3、在需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径

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

4、在父组件中，直接引入即可

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

具体代码：

// 子组件
    
    <view class='tabbar-wrapper'>
     <view class='left-bar {
       {currentpage==="index"?"active":""}}' bindtap='jumpToIndex'>
     <text class='iconfont icon-shouye'></text>
     <view>首页</view>
     </view>
     <view class='right-bar {
       {currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'>
     <text class='iconfont icon-shezhi'></text>
     <view>设置</view>
     </view>
    </view>

### **2、父子组件间通信** ###

在vue中

父组件向子组件传递数据，只需要在子组件通过 v-bind传入一个值，在子组件中，通过 props接收，即可完成数据的传递，示例：

// 父组件 foo.vue
    <template>
     <div class="container">
     <bar :title="title"></bar>
     </div>
    </template>
    <script>
    import Bar from './bar.vue'
    export default{
    data:{
     title:"我是标题"
    },
    components:{
     Bar
    }
    </script>
     
    // 子组件bar.vue
    <template>
     <div class="search-box">
     <div :title="title" ></div>
     </div>
    </template>
    <script>
    export default{
    props:{
     title:{
      type:String,
      default:''
      }
     }
    }
    </script>

子组件和父组件通信可以通过 this.$emit将方法和数据传递给父组件。

**在小程序中**

父组件向子组件通信和vue类似，但是小程序没有通过 v-bind，而是直接将值赋值给一个变量，如下：

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

此处， “index”就是要向子组件传递的值

在子组件 properties中，接收传递的值。

properties: {
     // 弹窗标题
     currentpage: {   // 属性名
      type: String,  // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 'index'  // 属性初始值（可选），如果未指定则会根据类型选择一个
     }
     }

子组件向父组件通信和 vue也很类似，代码如下：

//子组件中
    methods: {
     // 传递给父组件
     cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
     },
    }
     
    //父组件中
    <bar bind:myevent="toggleToast"></bar>
     
    // 获取子组件信息
    toggleToast(e){
     console.log(e.detail)
    }

如果父组件想要调用子组件的方法

vue会给子组件添加一个 ref属性，通过` this.$refs.ref`的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

//子组件
    <bar ref="bar"></bar>
     
    //父组件
    this.$refs.bar.子组件的方法

小程序是给子组件添加 id或者 class，然后通过` this.selectComponent`找到子组件，然后再调用子组件的方法,示例：

//子组件
    <bar id="bar"></bar>
     
    // 父组件
    this.selectComponent('#bar').子组件的方法

## **4.条件渲染** ##

vue:使用v-if指令，v-else表示v-if的else块，v-else-if表示v-if 的“else-if 块”

1 <div v-if="type === 'A'">
     2   A
     3 </div>
     4 <div v-else-if="type === 'B'">
     5   B
     6 </div>
     7 <div v-else-if="type === 'C'">
     8   C
     9 </div>
    10 <div v-else>
    11   Not A/B/C
    12 </div>

微信小程序：使用wx:if,wx:else表示wx:if的else块，wx:elif表示wx:if的"else-if"块

## **5.显示隐藏元素** ##

VUE:v-show="..."

微信小程序：hidden="\{ \{...\}\}"

## **6.绑定class** ##

vue:全用v-bind，或者简写为:bind,和本有的class分开写

微信小程序：

## **7.事件处理** ##

VUE：使用v-on:event绑定事件，或者使用@event绑定事件

<button v-on:click="counter += 1">Add 1</button><button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

微信小程序：全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件

<button bindtap="clickMe">点击我</button><button catchtap="clickMe">点击我</button>  //阻止事件冒泡

## **8.绑定事件传参** ##

VUE:vue绑定事件的函数传参数时，可以把参数写在函数后面的括号里

微信小程序：微信小程序的事件我试过只能传函数名，至于函数值，可以绑定到元素中，在函数中获取

<view data-tab="1" catchtap="changeTab">哈哈</view>
    js:
    changeTab(e){
       var _tab = e.currentTarget.dataset.tab;  
    }

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220201/38bc9c3e7c034fc184fedd148850e71d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1]: /images/20220201/dc9ac7f4617d4801a377a6fb12c1a7ca.png
[20190510130531760.jpg]: /images/20220201/37ab6d4520054e899a8ee70f3d3bd174.png