小程序笔记之一-CFANZ编程社区

一、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能
够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：

//在组件的 .js 文件中新增如下配置
Component({
	options:({
		styleIsolation:'isolated'
	})
})

//或在组件的 .json 文件中新增如下配置
{
	"styleIsolation":"isolated"
}

styleIsolation 的可选值
可选值 -------默认值------描述

isolated 是表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared 否表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared 否表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了apply-shared 或 shared 的自定义组件

二、数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

Component({
	observers:({
		'字段A,字段B':function(字段A的新值，字段B的新值){
			//do something
		}
	})
})

实例:

//wxml
<view>{{ n1 }}+{{ n2 }}={{ sum }}</view>
<button bindtap="add1">n1 +1 </button>
<button bindtap="add2">n2 +1 </button>

//js
data: {
    n1: 0,
    n2: 0,
    sum: 0
  },
observers: {
    'n1, n2': function (newN1, newN2) {
      this.setData({
        sum: newN1 + newN2
      })
    }
  }

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

Component({
	observers:({
		'对象.属性A,对象.属性B':function(属性A的新值，字段B的新值){
			//do something
		}
	})
})

三、数据监听器

概念：纯数据字段指的是那些不用于界面渲染的 data 字段。

应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能。

使用：在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：

Component({
	data: {
	    _rgb: {
	      r: 0,
	      g: 0,
	      b: 0
    },
    	fullColor: '0,0,0'
  },
	options:({
	//指定所有_开头的数据字段为纯数据字段
		pureDataPattern: /^_/
	})
})