微信小程序与vueJs的异同

简而言之，所有的框架都是建立在原生javascript基础之上的，所以对于有一定js基础的同学来说，各种框架都是比较容易入手的，但不同的框架之间又有一定的差别，有时候切换使用时就会掉入坑了。

一、微信小程序有自己封装的一套组件视图容器，它把平时我们可能会用的一些页面视图效果都进行了分装；

eg:  swiper,scroll-view,表单组件

在Vue项目中，我们可能要通过引入第三方组件库swiper,表单组件更多的是结合element-ui或者ant-ui 或者 iview 来实现表单页面的实现。

二、条件渲染与列表渲染

在js中我们都知道，用于条件判断，用的最多的就是if(){}else{}，而在vue和微信小程序框架中，它对该类方法进行了封装，通过指令调用方式来实现。

vue中：

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

习惯于vue框架的人，长时间没接触微信小程序的后果：

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

然后执行，完全没毛病是不是，可是数据就是出不来，我曾经反反复复检查了好几遍代码，自信绝对没问题，再去console后台数据，返现数据是可以console出来的，才惊觉可能是微信小程序的条件渲染不对，然后查看微信小程序文档才发现，在微信里面，都是通过

{{ }} 的语法把一个变量绑定到界面上的，正确操作

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}” 

vue中列表渲染时，

<p v-for=”(index,item) in array” :key=”item.id”></p>；

微信小程序中，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

三、数据获取

vue实例化后，初始化data，通过this.能获取到data内的数据，正常操作：

data(){
  return {
    message:””
  }
},
 
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
 
}

小程序中，初始化页面数据之后，是通过this.data来获取页面的data来获取页面对象的，同样操作，

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵哒”;   //视图界面上的值并没有发生改变
}

先不说一不小心this.message，后来幡然醒悟过来这是小程序，那么，问题又来了，视图界面上的值并没有发生变化。

再去查询文档（来自微信小程序官方文档说明）：

1、直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。

2、单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

3、this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。

简而言之，就是，setData 函数刷新数据并展示在页面上，this.data改变了数据，但是不会改变视图页面的内容。

所以，正确操作

methods:{
  this.data.message = “呵呵哒”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

四、顺道记下vue中$set的使用

在vue开发过程中，当vue实例创建之后再去添加新的给数据添加新的属性时，会发现数据并没有自动更新到视图上去。

原因：受现代 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除。vue实例化数据项时，会通过Object.defineProperty的getter和seter方法对数据进行module层和view层数据的相应和改变。所以，所以属性必须在 data 对象上存在才能让 Vue 转换它

解决方法：

Vue.set( target, key, value )；

参数：

{Object | Array} target

{string | number} key

{any} value

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新,它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。

data(){
  return{
     stuff:{
       name:”xiaoling”,
       age:”28”
     }
  }
},
 
methods:{
  change:function(){
     this.sex=”女”； // 不会在页面上看到修改效果
     this.$set(stuff,“sex”,”女”) //完美
  }
}

五、记录一下神坑

微信小程序官方文档：微信小程序页面路径只能是五层，应尽量避免多层级的交互方式；所以当我们使用wx.navigateTo跳转的正开心突然不能跳转的时候，不要怀疑人生，微信做了限制，可以通过使用wx.redirectTo来实现但是redirect设置关闭了当前页，页面返回效果就没有了，还是要看交互最终的效果是否可行。