计算属性和监听属性，生命周期钩子，组件介绍

码龄6年

关注

原创最新推荐文章于 2026-04-02 09:30:53 发布 695 阅读 GEO检测

Vue2基础补充(箭头函数、for循环、修饰符、表单控制、v-model进阶、axios、计算属性、监听属性、组件) Vue 能够追踪计算属性的依赖关系，当依赖的数据发生变化时，相关的计算属性会自动更新。只有在依赖发生改变时，才会重新计算计算属性的值，否则会直接返回缓存的结果。es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。：在实例初始化之后，数据观测和事件配置之前被调用，此时实例还未初始化完成。：实例销毁后调用，此时实例及其所有的指令被解绑，事件监听器被移除。：只处理自己的事件，父控件冒泡的事件不处理，：只处理自己的事件，子控件冒泡的事件不处理，阅读详情

计算属性

# 计算属性是基于它们的依赖进行缓存的
# 计算属性只有在它的相关依赖发生改变时才会重新求值
# 计算属性就像Python中的property，可以把方法/函数伪装成属性
# 计算属性必须要有返回值

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>普通函数---其他数据变化---》函数会重写计算</h1>
    年龄：<input type="text" v-model="age">
    姓名：<input type="text" v-model="name">
    <br>
    {{getAge()}}
    <br>
    <h1>计算属性</h1>
    年龄：<input type="text" v-model="age1">
    姓名：<input type="text" v-model="name1">
    <br>
    {{newAge}}
    <br>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            age: '',
            name: '',
            age1: '',
            name1: '',
        },
        methods: {
            getAge() {
                console.log('我执行了')
                return Number(this.age) + 10
            }
        },
        computed: {
            newAge() {
                console.log('我执行了--计算属性')
                return Number(this.age1) + 20
            }
        }
    })
</script>
</html>

首字母变大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>首字母变大写</h1>
    <input type="text" v-model="name"> ---》{{newName}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: ''
        },
        computed: {
            newName() {
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        }
    })
</script>
</html>

通过计算属性，重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
        },
        computed:{
            newDataList(){
                return  this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }
    })
</script>
</html>

监听属性

只要属性发生变化，就会执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>监听属性</h1>
    <button @click="ordering='id'">按id排序</button>
    <button @click="ordering='price'">按价格排序</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ordering: ''
        },
        watch: {
            ordering() {
                console.log('我变了,向后端发送请求')
                console.log(this.ordering)
            }
        }
    })
</script>
</html>

生命周期钩子

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


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

# 实际用途
   1 页面加载完成，向后端发请求拿数据
   写在create中

2 组件中有定时任务，组件销毁，要销毁定时任务、

# 补充：定时器和延时器
setTimeout( ()=>{
console.log('延时器，3s后执行')
},3000)

setInterval(()=>{
console.log('每隔3s执行')
},3000)

组件介绍

# 组件是：有模板，有js的 ，有方法的 对象  组件和组件直接的 变量，模板都是隔离的

# 定义组件
    Vue.component('Child',{
        template: `
          <div>
          <h1>我是组件</h1>
          <button @click="haneleClick">点我看美女</button>
          <p>年龄是：{{ age }}</p>
          </div>`,
        data() {
            return {
                age: 19
            }

        },
        methods: {
            haneleClick() {
                alert('美女')
            }
        }
    })
# 使组件，直接根据组件名使用即可
  <Child></Child>

局部组件和全局组件

# 全局组件
   - 定义：
Vue.component('Child',{})
- 使用，可以在任意位置使用
   <Child></Child>

# 局部组件-->只能定义在组件内部，只能在当前组件中使用
   -定义
   var vm = new Vue({
el: '#app',
data: {},
components:{局部组件:{}}
})
-使用：只能用在被当前组件管理的 html （#app）中，放在别的位置找不到

全局组件使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>组件的使用</h1>
    <button @click="handleClick">点我看美女</button>
    <hr>
    <lyz></lyz>
</div>
</body>
<script>
    // 定义全局组件
    Vue.component('lyz', {
        template: `
          <div>
            <h1>{{ name }}</h1>
            <button @click="handleClick">点我换名字</button>
          </div>`,
        data() {
            return {
                name: 'lyz'
            }
        },
        methods: {
            handleClick() {
                this.name = '吴彦祖'
            }
        }
    })
    var vm = new Vue({
        el: '#d1',
        data: {},
        methods: {
            handleClick() {
                alert('美女')
            }
        }
    })
</script>
</html>

局部组件的使用

局部组件是定义在组件内部，只能在当前组件中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>局部组件的使用</h1>
    <Child></Child>
</div>
</body>
<script>
    // 全局组件
    Vue.component('Child', {
        template: `
          <div>
            <lyz></lyz>
          </div>
        `,
        // 局部组件
        components: {
            lyz: {
                template: `
                  <div>
                    <h2>我是局部组件</h2>
                  </div>
                `,
                data() {
                    return {}
                },
                methods: {}
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女')
            }
        },
    })
</script>
</html>

组件间通信

父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>组件通信之父传子：自定义属性</h1>
    <p>父组件中得名字:{{name}}</p>
    <div style="background-color: #c0e9ff">
        <child :nn="name" mm="lyz"></child>
    </div>
</div>
</body>
<script>
    Vue.component('child',{
        template:`
            <div>
            <h2>我是Child组件</h2>
            <p>{{nn}}==={{mm}}</p>
            </div>
        `,
        props:['nn','mm']
    })
    var vm = new Vue({
        el:'#d1',
        data:{
            name:'吴彦祖'
        },
        methods:{
        }
    })
</script>
</html>

子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>组件通信之子传父：自定义事件</h1>
    <p>子组件的值：{{p_name}}</p>
    <child @mm="handleEvent"></child>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
          <div>
            <h2>我是Child组件</h2>
            <input type="text" v-model="name">---{{ name }}
            <button @click="handleSend">传给父亲</button>
          </div>
        `,
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handleSend() {
                this.$emit('mm', this.name)
            }
        }
    })
    var vm = new Vue({
        el: '#d1',
        data: {
            p_name: ''
        },
        methods: {
            handleEvent(name) {
                this.p_name = name
            }
        }
    })
</script>
</html>

收录于