响应式
什么是响应式?
响应式: 数据发生变化之后,然后执行一定的"副作用"
副作用包括: 对页面的渲染, 发起ajax请求,任何的业务逻辑
代码举例:
<!-- 一.准备dom结构 -->
<div id="app"></div>
<!-- 二.在script标签中书写具体代码 -->
<script>
// 定义一个对象
let data = {
name:'cp'
}
知识铺垫:
data.name //这称为访问对象的属性
data.name = 'pink' //这称为给对象的属性重新赋值
问题:定义一个对象,不管是修改它的属性还是访问它的属性时
它是一个静默状态,都不知道数据被修改了,也没机会去书写逻辑以及做其它的事情
* 解决:通过原生js的 Object.defineProperty() 方法重新定 义一下这个属性
具体代码:
//1.设置一个空对象
let data = { }
//2.通过Object.defineProperty()这个方法重新定义一下这个属性
//方法中三个参数: 参数一:给哪个对象设置
//参数二:要给对象设置一个什么样的属性名
//参数三: { }, 在{ }里面对属性的描述, 一个get函数 一个set函数
Object.defineProperty(data,'name',{
// get函数指: Object访问data中name属性就会立刻执行此函数
get(){
console.log('name属性被访问了');
//在控制台输入 data.name敲空格进行访问
如图:
},
//set函数指: 对属性进行设置或重新赋值时会执行此函数
set(newValue){
console.log('name属性被设置了');
//在控制台输入 data.name='小仙女'敲空格进行访问
如图:
// 只要数据被更新就执行此方法 在里面可以执行 页面渲染,发起ajax请求等逻辑
// 以更新视图为例:只要name值发生变化,就把name属性的值更新到视图上
// 操作dom首先获取到dom元素,然后用 innerText 将数据渲染进结构中,就会在视图中显示
// 在set函数的形参newValue中拿到name属性最新被设置之后的值
// 再赋值给视图即可实现响应式
// 这里的副作用是:除了得到更新后最的值以外,还把视图区域的内容修改了
document.getElementById('app').innerText = newValue
},
})
副作用(了解)
//1.代码举例
//定义一个纯函数函数进行简单计算
function sum(a,b){
return a + b
}
//再定义一个函数
function sum1(a,b){
window.location.href = 'http://baidu.com'
return a + b
}
//两个函数区别:
// 第二个函数比第一函数多了一个跳转功能
// 对比:第二个函数有副作用,因为纯函数给了固定的参数,返回给你固定的结果,不会有其他结果
// 函数二:是有副作用的函数,除了进行逻辑运算后又做了其他事情,这都叫做副作用
<script/>
