vue第3天知识点：计算属性的基本使用、watch监视数据的使用以及对象、数据双向绑定原理：View-Model、Model-View-vue2.0、vue2.0实现与缺点、vue3.0实现

最新推荐文章于 2023-01-31 15:54:02 发布

库库好困

最新推荐文章于 2023-01-31 15:54:02 发布

阅读量214

点赞数

分类专栏：十：VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_46597922/article/details/107529142

版权

计算属性

计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。

基本使用

1、计算属性应写在computed对象中，每一个计算属性的值是一个函数并且必须有返回值。

2、计算属性不可以和data中的属性重名

3、计算属性在使用时，和data中属性的使用方法一样。直接用属性名不要加括号。

基本语法：

/*
计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时，和调用data中属性一样，不要加括号。
计算属性名: function () {
	return 返回值
}
*/

例：

var vm = new Vue({
   
      el: '#app',
      data: {
   
        n1:'',
        n2:''
      },
      //n3依赖与n1和n2的值，当n1 和 n2发生改变的时候，这个函数就会执行。
        //返回值就是n3的值
      computed: {
   
        n3(){
   
          return +this.n1 + +this.n2;
        }
      }
    });

注意点：
1 、定义在coomputed对象中
2、定义成一个函数且必须有返回值
3、属性名不可以和data中的属性名重复
4、调用的时候按照属性的方式调用，不能加括号。

计算属性的有点-缓存机制：
1、计算属性第一次执行以后，会把结果缓存起来，再次调用计算属性，直接缓存。
2、依赖的属性发生变化的时候，会再次执行，并缓存。

计算属性是基于它们的依赖项进行缓存的

如果页面中需要使用多次计算属性的值，只会计算一次，计算属性只有在它的相关依赖发生改变时才会重新求值。

计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的

代码演示：

<body>
  <!-- 
    /*
计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时，和调用data中属性一样，不要加括号。
计算属性名: function () {
	return 返回值
}

注意点：
1 、定义在coomputed对象中
2、定义成一个函数且必须有返回值
3、属性名不可以和data中的属性名重复
4、调用的时候按照属性的方式调用，不能加括号。


计算属性的有点-缓存机制：
1、计算属性第一次执行以后，会把结果缓存起来，再次调用计算属性，直接缓存。
2、依赖的属性发生变化的时候，会再次执行，并缓存。
*/
   -->
  <div id="app">
    <h1>vue的例子</h1>
    <!-- <p>{
   {msg.split('').reverse().join('')}}</p>
    <p>{
   {msg.split('').reverse().join('')}}</p>
    <p>{
   {msg.split('').reverse().join('')}}</p>
    <p>{
   {msg.split('').reverse().join('')}}</p>
    <p>{
   {msg.split('').reverse().join('')}}</p> -->

    <p>{
  {reverseMsg}}</p>
    <p>{
  {reverseMsg}}</p>
    <p>{
  {reverseMsg}}</p>
    <p>{
  {reverseMsg}}</p>
    <p>{
  {reverseMsg}}</p>
    <p>{
  {reverseMsg}}</p>


    <!-- {
   {reverseMsg}} -->
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
    
      el: '#app',
      data: {
    
        msg: 'hello'
      },
      computed: {
    
        reverseMsg: function(){
    
          console.log('我执行了一次')
          return this.msg.split('').reverse().join('')
        }
      }
    })
  </script>
</body>

计算属性完整语法：

在需要改变计算属性值的时候，需要使用计算属性的完整写法：

/*
计算属性名: function () {
	// getter  读取计算属性值得时候自动走get逻辑 
	get: function () {
		console.log('get被触发了')
		return this.firstName + ' ' + this.lastName    
	},  
	// setter  设置计算属性值得时候自动走set逻辑  
	set: function (value) {      
		console.log(value)
		console.log('set被触发了')
	}  
}
*/

代码演示：

<body>
  <div id="app">
    <h1>vue的例子</h1>

    <input type="text" placeholder="请输入你的姓" v-model="firstName"/> +
      <input type="text" placeholder="请输入你的名" v-model="lastName"

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第3天知识点：计算属性的基本使用、watch监视数据的使用以及对象、数据双向绑定原理：View-Model、Model-View-vue2.0、vue2.0实现与缺点、vue3.0实现

计算属性计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。基本使用1、计算属性应写在computed对象中，每一个计算属性的值是一个函数并且必须有返回值。2、计算属性不可以和data中的属性重名3、计算属性在使用时，和data中属性的使用方法一样。直接用属性名不要加括号。基本语法：/*计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时，和调用data中属性一样，不要加括号
复制链接

扫一扫