小程序behavior

---

1，behavior的用处

behavior相当于各个组件的公共代码部分，每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用，方便管理与统一修改. 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior

2，behavior的基础使用

①创建js文件，并导出

// behaviors公共代码
const behavior=Behavior({
  properties:{
    bprops:{
      type:String,
      value:"behavior内的自定义属性"
    }
  },
  data:{
      bmsg:"behavior内的自定义数据"
  },
  methods:{
      fun(){
       wx.showToast({
         title: 'hahah',
       })
      }
  }
})
module.exports=behavior

②在其他组件中引入并注册

// components/mycomp/mycom.js
const comBehavior = require("../../behaviors/common")
Component({
  behaviors:[comBehavior],
  /**
   * 组件的属性列表
   */
  properties: {
    props:{
      type:String,
      value:"自定义属性"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
      msg:"自定义组件的数据"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

③ 在wxml页面中使用

<view>
属性：
{{props}}
</view>
<view>数据：{{msg}}</view>

3.内置behavior

3.1自定义组件中单个表单元素

①创建组件，并设置组件的内容

<input type="text" model:value="value"/>

②在主界面index.json中注册，并在wxml中使用

{
  "usingComponents": {
    "my-input":"../../components/myinput/myinput"
  }
}

2.内置behavior单个表单元素
<view>
<form bindsubmit="submit">
<label for="username">账号：<my-input name="username"></my-input></label>
<label for="userpass">密码：<input type="text" name="userpass" id="userpass"/></label>
<label for="nickname">昵称：<input type="text" name="nickname" id="nickname"/></label>
<button form-type="submit">提交</button>
</form>

③组件中引入内置behavior

Component({
  // behaviors:['wx://form-field'],
     ....
})

3.2自定义组件中多个表单元素

①创建组件，设置组建的内容

<!-- 2.多个表单元素 -->
<label for="username">账号：<input type="text" name="username" id="username"/></label>
<label for="userpass">密码：<input type="text" name="userpass" id="userpass"/></label>
<label for="nickname">昵称：<input type="text" name="nickname" id="nickname"/></label>

②注册组件并使用

3.内置behavior多个表单元素
<view>
<form bindsubmit="submit">
<my-input></my-input>
<button form-type="submit">提交</button>
</form>
</view>

③在组件中引入内置behavior

Component({
  behaviors:['wx://form-field-group'],
  /**
   * 组件的属性列表
   */
...
})

4.computed计算属性

进入小程序端根目录
1.将小程序项目初始化为node应用
      npm init -y
2.安装依赖模块
      npm install --save miniprogram-computed
3.进行构建
	位置：  菜单栏--工具--构建npm
4.正常使用即可  

5.组件中正常设置数据

6.组件js文件中引入第三方behavior，并注册使用computed

// components/mysun.js
const computedBehavior = require("miniprogram-computed").behavior;
Component({
  behaviors:[computedBehavior],
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    numa:10,
    numb:22
    // sum:32
  },
  computed:{
    sum(data){
      console.log(data.numa,data.numb)
      return data.numa+data.numb
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    changeNum(){
      this.setData({
           numa:++this.data.numa,
      numb:++this.data.numb
      })
   
    }
  }
})

watch侦听器

watch和observers语法一致，区别：

1.从原理上说， `watch` 的性能比 `computed` 更好；但 `computed` 的用法更简洁干净。
此外， `computed` 字段状态只能依赖于 `data` 和其他 `computed` 字段，不能访问 `this` 。如果不可避免要访问 `this` ，则必须使用 `watch` 代替

2.无论字段是否真的改变， `observers` 都会被触发，而 `watch` 只在字段值改变了的时候触发，并且触发时带有参数。·