当前位置：首页 > news >正文

计算属性与监听属性

news 来源：原创 2024/7/5 9:47:10

【 1 】计算属性

计算属性大致就是这样

# 1  计算属性是基于它们的依赖进行缓存的# 2 计算属性只有在它的相关依赖发生改变时才会重新求值# 3 计算属性就像Python中的property，可以把方法/函数伪装成属性
# 计算属性本质上是一个函数，它们可以通过 get 和 set 方法对属性进行操作。# 4 写在computed中，必须返回值--》返回值才是属性-以后把他当属性用-被for循环

个人的理解就是

vue中的计算属性的好处就是我比如在设置了一个input标签里写了计算属性之后别的组件发生改变我的input标签也不会发生改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script></head>
<body>
<div id="app"><input type="text" v-model="name">--》》{{ newName }}<hr><input type="text" v-model="name1">---》{{ name1 }}</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: '',name1: ''},methods: {// 普通函数形式handleToUpper() {console.log('函数我执行了')return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)}},computed:{// 将 handleToUpper() 方法改写为计算属性newName(){console.log('计算属性我执行了')return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)}}})</script>
</html>

【 2 】监听属性

# 1 监听住一个属性，只要这个属性发生变化，就执行函数

name 属性被监听，当它的值发生变化时，会触发相应的处理函数。

在Vue.js中，监听属性（Watchers）必须在 watch 对象中定义，而计算属性（Computed Properties）必须在 computed 对象中定义。

Watchers（监听属性）：用于监听某个数据的变化，并在数据发生变化时执行一些自定义的逻辑。你可以在 watch 对象中定义一个或多个属性，每个属性对应一个要监听的数据，并指定一个处理函数。
Computed Properties（计算属性）：用于基于已有的数据计算出一个新的值，这个新的值会被缓存起来，只有在相关的依赖发生变化时才会重新计算。你可以在 computed 对象中定义计算属性，每个属性对应一个计算值的处理函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script></head><div id="app"><input type="text" v-model="name"><p>新的 name: {{ name }}</p><p>旧的 name: {{ oldName }}</p>
</div><script>var vm = new Vue({el: '#app',data: {name: 'John',oldName: ''},watch: {// 监听name属性的变化name: function(newValue, oldValue) {this.oldName = oldValue; // 将旧的名字存储到oldName数据属性中console.log('Name changed from ' + oldValue + ' to ' + newValue);}}});
</script>
</html>

【 3 】生命周期钩子

生命周期

new Vue---->根组件.03

vue2 组件的生命周期钩子函数

一个vue的组件，从创建开始—》到最后销毁—》经历一些过程—》每个过程都绑定了一个函数–》当到这个过程的时候，这个函数就会执行
面向切面编程：AOP

8个生命周期钩子函数

beforeCreate：组件创建之前实现这个：组件html，js–》html和js都是空的
created：组件创建完成后：js就有值了，html还是空的（向后端发送ajax请求）
beforeMount：挂载模板之前，js有值，模板(html) 还是空的（向后端发送ajax请求）
mounted：挂载完成：js有值，模板有值
beforeUpdate：刷新之前执行：只要页面发送变化或js变量发生变化，就会触发它的执行
updated：刷新之后执行
beforeDestroy：被销毁之前执行（资源清理性工作）
destroyed：被销毁之后执行

实际用途

页面加载完成，向后端发请求拿数据
- 写在create中
组件中有定时任务，组件销毁，要销毁定时任务、

# 1 new Vue---->根组件
# 2 创建全局组件---》放在根组件中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><h1>组件使用</h1><button @click="hanleShow">显示隐藏组件</button><hr><Child v-if="isShow"></Child><hr></div>
</body>
<script>let a = {template: `<div><button @click="handleClick">{{ title }}</button></div>`,data() {return {title: '首页',t:null}},methods: {handleClick() {this.title = '拜年了'alert(this.title)}},beforeCreate() {console.log('beforeCreate')console.log(this.title)console.log(this.$el)},created() {// 跟后端交互console.log('created')console.log(this.title)console.log(this.$el)// 启动定时器--》每隔3s，打印helloworldthis.t=setInterval(()=>{console.log('hello world')},3000)},beforeMount() {console.log('beforeMount')console.log(this.title)console.log(this.$el)},mounted() {console.log('mounted')console.log(this.title)console.log(this.$el)},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy(){console.log('beforeDestroy')// 销毁定时器clearInterval(this.t)this.t=null},destroyed() {console.log('destroyed')},}// 1 定义全局组件Vue.component('Child', a)var vm = new Vue({el: '#app',data: {isShow: true},methods: {hanleShow() {this.isShow = !this.isShow}}})</script>
</html>