【uni-app踩坑记录】observers在uni-app的替代（watch和computed实现监听数据）

项目场景：

最近学习HbuilderX开放微信小程序，小程序的属性插值在vue中并不适用，例如

---

问题描述

小程序语句

	<view style="background-color:rgb({{变量值}})"<view>

但是在vue中不起作用

---

原因分析：

vue有自己的语法，这种情况需要用到watch和computed的结合来监听数据的变化

---

解决方案：

比如我要用三个按钮控制rgb三个颜色值，从而来控制一块区域的背景色

如果是在微信开发者工具的话，就比较简单
可以参考黑马程序员教程来实现

但是如果使用vue语句，则无法与其一致，我是这样实现的

<view>
		<view :style="fullcolor" class="colorbox">{{fullcolor}}</view>
		<button type="default" size="mini" @click="changeR">r</button>
		<button type="primary" size="mini" @click="changeG">g</button>
		<button type="warn" size="mini" @click="changeB">b</button>
		<view>{{rgb.r}}</view>
		<view>{{rgb.g}}</view>
		<view>{{rgb.b}}</view>
	</view>

<script>
	data() {
				return {
					rgb:{
						r:0,
						g:0,
						b:0
					},
					fullcolor:"background-color:rgb(0,0,0);" //定义字符串来给到style
				};
			},
			methods:{
				//以下三个是我的按钮点击事件
				changeR(){
					this.rgb.r = this.rgb.r + 5 >255 ? 255 : this.rgb.r + 5 
				},
				changeG(){
					this.rgb.g = this.rgb.g + 5 >255 ? 255 : this.rgb.g + 5
					
				},
				changeB(){
					this.rgb.b = this.rgb.b + 5 >255 ? 255 : this.rgb.b + 5 
				}
			},
			computed:{
				//将三个rgb的值绑定在一起
				getwhole(){
					const{rgb} = this
					return "("+rgb.r+","+rgb.g+","+rgb.b+");" //通过字符串的形式返回
				}
			},
			watch:{
				getwhole:function(e){
					this.fullcolor = "background-color:rgb"+e
					//这里得到的效果就是字符串 "background-color:rgb(rgb.r, rgb.g, rgb.b)"
				}
			}
		}
		</script>

实现效果

通过按键可以改变rgb的三个值并且可以改变背景颜色