anjular2以及微信小程序的一点比较

Posted 2020-08-11 Runlin

1条件渲染：

小程序：用 wx:if="{{condition}}" 来判断是否需要渲染该代码块。

<view wx:if="{{condition}}">
　　　　True
</view>

ng2:  用 *ngIf="condition"来判断是否需要渲染该代码块。
<p  *ngIf="condition">
　　　　condition is true and ngIf is true.
</p>

对于ng2, 当=号里面的值为真时才渲染标签内的元素，为假时将元素移除。注意：这里是将元素从DOM树里面完全移除，而不是隐藏。 对于需要频繁切换可见性的元素来说，改变元素的display无疑要比频繁的移除和重新渲染高效的多。 不过，angulra2开发者认为，在大多数 UI中，当我们“关闭”一个组件时，在相当长时间内都不大可能想再见到它——可能永远也不见。 而且，当我们隐藏掉一个元素时，组件的行为还在继续——它仍然附加在它所属的 DOM 元素上， 它也仍在监听事件。 Angular 会继续检查哪些能影响数据绑定的变更。 组件原本要做的那些事情仍在继续。 虽然不可见，组件及其各级子组件仍然占用着资源。  虽然每种方法都有各自的优点和缺点，但使用 ngIf 来移除不需要的组件通常都会比隐藏它们更好一些。

微信小程序文档较少，不过根据文档中这段话：

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

可以推测wx:if和*ngIf实质是一样的，虽然在写法上有些区别，wx是将条件包裹在{{ condition }}里面。

 

2 循环列表渲染

小程序：

列表渲染：默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{items}}">
　　{{index}}: {{item}}
</view>

如某个数组为[a,b,c,d]，则对应的下标index为0,1,2,3，对应的变量名item为a,b,c,d

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

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

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

则此时下标idx为0,1,2,3, 变量名itemName为a,b,c,d

ng2:

<div *ngFor="let hero of heroes; let i=index">

　　　　{{i + 1}} - {{hero.fullName}}

</div>
ng2里指定变量名用的是let hero of heroes，即设置变量名为hero，对应微信的 wx:for-item="itemName；
指定下标let  i=index，对应微信的wx:for-index="idx";

上面这种写法实际上已经经过语法糖包装后的写法，原来的写法太啰嗦，形似类似：

 

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
　　　　<li>...</li>
</template>

 

3数据绑定

微信：
数据绑定使用 Mustache 语法（双大括号）将变量包起来
　　　　<view> {{ message }} </view>
并在js文件里面设置对应的变量值
Page({
　　data: {
　　　　message: \'Hello MINA!\'
　　}
})

微信小程序没有双向数据绑定，要改变变量值时，需要通过setdata改变，监听事件如
eventname: function(e) {
　　this.setData({
　　　　data: "im_new"
　　})
}
注意不能这样this.data="im_new"，否则会出错

 

ng2:

ng2:

主要看一下双向数据绑定：

<input [(ngModel)]="currentHero.firstName">

（123）表示绑定事件，[12345]表示绑定数据

通过[( )]即可实现双向数据绑定

这是种简写的形式，背后是这样写的
<input
　　　　[ngModel]="currentHero.firstName"
　　　　(ngModelChange)="currentHero.firstName=$event">