1.7章《传递UI片断》,需要做几个案例,这部分暂停消化几天。我们先把基础部分相对简单的最后两章学习了。

计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应。两者的区别,在于响应方式的不同。

1、计算属性,如【const result = computed(()={return a + b})】。知名见意,是一个计算表达式,表达式中使用到的响应式变量都是它监听的对象,只要其中有任何变量发生变化,结果都会重新计算。可以理解为EXCEL里的计算,比如某个单元格的公式为“=A2+A1”。A2或A1发生变化是,结果也随之改变。

2、数据监听,如【watch(a,(newValue,oldValue)=>{console.log(newValue,oldValue)})】,其中a为被监听对象(必须是响应式),当a发生变化时,执行后面的回调函数,newValue是被监听对象的新值,oldValue为旧值,这两个值在回调的方法体里面,可以使用。

3、computed和watch,都会因被监听对象的改变,自动做出响应。不同的是,computed是为了返回一个计算结果(这个结果是ref响应式的);而watch是为了执行一个回调函数,做一些事情。所以,理论上watch也可以返回一个计算结果,实现computed的功能。

Blazor中没有计算属性和数据监听的概念,但也能实现相应的功能,只是本人技术有限,会有些差异限制。我们直接通过案例来进行对比:

一、Vue的计算属性computed和Blazor的实现

//Vue=====================================
//Vue使用computed来实现一个表达式的计算,参数是一个回调,在方法体里return出计算表达式。computed的返回值是一个ComputedRefImpl类型对象,使用方式和ref响应式对象一样
//实际上computed的值是可写的,如下写法:computed({get(){},set(newValue){}}),在set里写修改逻辑。但非常不推荐这么做,一违反这个API的设计初衷,二真没必要。
<template>
<h1>a:{{a}}</h1>
<h1>b:{{b}}</h1>
<h1>result:{{result}}</h1>
<button @click="a++">a++</button>
<button @click="b++">b++</button>
<button @click="show">show</button>
</template> <script setup>
import {ref,computed} from 'vue'
const a = ref(1)
const b = ref(2)
const result = computed(()=>{
console.log('执行计算'); //监测计算的执行
return a.value+b.value
})
//result是ComputedRefImpl类型对象,逻辑层也需要像ref一样
//在视图层,result也和ref对象一样,会自动解包,可以直接使用
function show(){
console.log(result);
}
</script> //Blazor====================================
//计算属性,本质上就是表达式,我们知道code里,表达式结果天然就是响应式的。所以我们可以定义一个变量,并根据其它变量来计算,
<h1>a:{{a}}</h1>
<h1>b:{{b}}</h1>
<h1>result1:{{result1}}</h1>
<h1>Result2:{{Result2}}</h1>
<button @onclick="a++">a++</button>
<button @onclick="b++">b++</button> @code{
private int a = 1;
private int b = 2;
private int result1 = a + b; //字段方式
public int Result2 => a + b; //属性方式(只读属性的简写)
//完整只读属性
private int result3;
public int Result3{
get{
Console.WriteLine("执行计算"); //监测计算的执行
return a + b;
}
}} //Vue和Blazor的区别
//难道在Blazor里,我们就这么简单了实现了computed?too young,too native
//我们分别在Vue和Blazor的视图层里,多次读取计算值,看看区别 //Vue中执行以下代码时,【console.log('执行计算')】只输出一次,计算结果被缓存,如果a和b不变,无论读取多少次,计算都不会重复执行。如果计算很复杂,将大大提升性能
<h1>result:{{result}}</h1>
<h1>result:{{result}}</h1>
<h1>result:{{result}}</h1>
//Blazor中执行以下代码时,【Console.WriteLine("执行计算");】输出三次,每次读取,都要执行一次计算。如果存在多次渲染、且计算复杂的情况,就需要特别注意
<h1>Result2:{{Result2}}</h1>
<h1>Result2:{{Result2}}</h1>
<h1>Result2:{{Result2}}</h1>

二、Vue的数据监听watch和Blazor的实现

//先说结论:虽然Blazor能够实现部分数据监控的功能,但存在很多缺漏。这不像计算属性,虽然存在性能问题,但功能是完整的
//Blazor对watch的实现,应该算是失败了 //Vue=====================================
//先简单汇总一下Vue中watch的基本用法
<template>
<h1>a:{{a}}</h1>
<h1>b:{{b}}</h1>
<button @click="a++">a++</button>
<button @click="b++">b++</button>
<button @click="people.look.height++">people对象身高++</button>
</template> <script setup>
import {ref, reactive,watch,watchEffect} from 'vue'
const a = ref(1)
const b = ref(1)
const people = reactive({name:"functionMC",look:{height:170,weight:130}}) //监视一个属性
watch(a,(newValue,oldValue)=>{
console.log(`a值被修改了,新值为${newValue},旧值为${oldValue}`)
})
//监视一个回调表达式,其中newValue和oldValue是表达式的结果
watch(()=>a.value+b.value,(newValue,oldValue)=>{
console.log(`a+b值被修改了,新值为${newValue},旧值为${oldValue}`)
})
//监视多个属性,其中newValue和oldValue都是返回形如[a,b]的数组
watch([a,b],(newValue,oldValue)=>{
console.log(`a或b值被修改了,新值为${newValue},旧值为${oldValue}`)
})
//Vue3的watch默认开启深度监视,可以监视对象的深层次改变,newValue和oldValue相等,都是新值
watch(people,(newValue,oldValue)=>{
console.log(`people的身高修改了,新值为${newValue.look.height},旧值为${oldValue.look.height}`)
})
//watchEffect是另外一个监听API,会自动监听回调中使用到的所有响应式数据,而且【在组件初次加载时会先执行一次回调】,而watch是懒加载,组件初次加载时,并不会调用回调
watchEffect(()=>{
const result = a.value+b.value
const height = people.look.height
console.log(`a+b=${result},people的身高为${height}`)
}) //watch和watchEffect的监听回调时机,是在DOM更新之前,所以回调中拿到的DOM是旧状态,如果要拿到更新后的新状态,需要配置一下
//watch(source, callback, {flush: 'post'})
//watchEffect(callback, {flush: 'post'}) </script> //Blazor===================================
<h1>a:@a</h1>
<h1>b:@b</h1>
<h1>身高:@People.Look.Height</h1>
<button @onclick="@(()=>A++)">A++</button>
<button @onclick="@(()=>B++)">B++</button>
<button @onclick="@(()=>C++)">C++</button>
<button @onclick="@(()=>People.Look.Height++)">people对象身高++</button> @code { //监视单个属性时,直接在set里执行回调
private int a;
public int A
{
get { return a; }
set {
Console.WriteLine($"A值被修改了,新值为{value},旧值为{a}");
a = value; }
} //监视多个属性时,在多个属性的set里执行一个委托
//action委托定义回调
private Action action = () =>
{
Console.WriteLine("B值或C值被修改了,无法获得新旧值");
}; private int b;
public int B
{
get { return b; }
set { b = value; action.Invoke(); } //值被修改时,执行委托
} private int c;
public int C
{
get { return c; }
set { c = value; action.Invoke(); } //值被修改时,执行委托
} //引用类型,无法监视到值得改变
private People people = new People
{
Name = "functionMC",
Age = 18,
Look = new Look { Height = 170, Weight = 130 }
};
public People People
{
get { return people; }
set
{
people = value;
Console.WriteLine("无法监视值得改变");
}
} //使用生命周期函数执行回调
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
Console.WriteLine("有数值被改了,但不知道是哪一个");
} }

三、总结:

1、Blazor通过get,可以实现computed的功能,但不具备cumputed的缓存能力,在执行复杂计算且在模板中多次渲染时,需要特别注意。

2、Blazor通过set,可以实现watch的部分功能,但实现不完整,直接的说,无法实现watch。

3、Blazor有没有可能实现完整的computed和watch?是有可能的!比如祖传的MVVM实现了属性变化通知,不就是watch吗。【或许社区已经实现了,只是我还不知道!】

Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听的更多相关文章

  1. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  2. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  3. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  4. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  5. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Python黑客编程基础3网络数据监听和过滤

    网络数据监听和过滤 课程的实验环境如下: •      操作系统:kali Linux 2.0 •      编程工具:Wing IDE •      Python版本:2.7.9 •      涉及 ...

  7. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  8. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  9. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  10. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

随机推荐

  1. POJ 3345 Bribing FIPA 树形DP

    题目链接: POJ 3345 Bribing FIPA 题意: 一个国家要参加一个国际组织,  需要n个国家投票,  n个国家中有控制和被控制的关系, 形成了一颗树. 比如: 国家C被国家B控制, 国 ...

  2. C#中调用存储过程:带输入输出参数

    using (SqlConnection conn = new SqlConnection(this.GetConnectionString(this.WMPDBName))) { SqlComman ...

  3. python常用web框架性能测试(django,flask,bottle,tornado)

    测了一下django.flask.bottle.tornado 框架本身最简单的性能.对django的性能完全无语了. django.flask.bottle 均使用gunicorn+gevent启动 ...

  4. 【高精度】NCPC 2014 C catalansqure

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1789 题目大意: 求大卡特兰数..公式如下.输入n求Sn(n<=5000) 题目 ...

  5. 【1】ShopNC 模仿笔记(一)

    不断学习,人生将会成功. 1. 序 一直想模仿一个整套的商城, 今天在shopNC 里面看到了想要的一切, 所以把一些组件, 命名规范等记录下来, 提高以后的开发效率. 官方网站 PC : shopN ...

  6. struts2(四)之输入校验

    前言 这个本来是昨天就写好的,但是不知道为什么没有保存成功!但是今天起来再写一遍就当巩固一下知识吧. 一.输入校验概述 在以前我们写一个登录页面时,并没有限制用户的输入,不管用户输入什么,我们都存入数 ...

  7. Adobe Audition 基本使用

    1.1简介 Adobe Audition (前身是Cool Edit Pro) 是Adobe公司开发的一款功能强大.效果出色的多轨录音和音频处理软件.它是一个非常出色的数字音乐编辑器和MP3制作软件. ...

  8. Java中 Linux下安装Redis

    1.连接上虚拟机之后,选择/usr/local目录,将redis-4.0.6.tar.gz放入/usr/local目录. 1.1:使用Xftp将redis-4.0.6.tar.gz放入/usr/loc ...

  9. jQuery validator plugin 之 custom methods 案例1:multi email

    1.add method jQuery.validator.addMethod( "multiemail", function (value, element) { var ema ...

  10. poj1734 Sightseeing trip【最小环】

    Sightseeing trip Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:8588   Accepted:3224   ...