Vue3学习笔记(2)

一、计算属性和侦听属性

        计算属性computed和Vue2差别不大，computed用于对数据进行计算，计算属性分为两种：1.可更改的计算属性； 2.不可更改的计算属性。

        应用场景：比如： 购物车总价、面积、体积、数据格式化。

1.不可更改的计算属性：

<template>
  <div>
    {{msg}}
    <hr>
    {{reverseMsg}}
  </div>
</template>
<script>
import { computed,ref } from 'vue';
export default {
  setup () {
    const msg = ref('Jevin is a beauty boy~');
    const reverseMsg=computed(()=>{
      return msg.value.split('').reverse().join('')
    })
    return {
      msg,
      reverseMsg
    }
  }
}
</script>

 运行结果：

2.可更改的计算属性：

同样的Vue3的计算属性和Vue2一样，也有set，get两个方法，对数据进行更改。

<template>
  <div>
    <div class="row">
      <label for="">姓</label>
      <input type="text" v-model="firstName" />
    </div>
    <div class="row">
      <label for="">名</label>
      <input type="text" v-model="lastName" />
    </div>
    <div class="row">
      <label for="">全名</label>
      <input type="text" v-model="fullName" />
    </div>
  </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    const fullName = computed({
      get() {
        return firstName.value + lastName.value;
      },
      set(newValue) {
        firstName.value=newValue.slice(0,1)
        lastName.value=newValue.slice(1)
      }
    });
    return {
      firstName,lastName,fullName
    };
  }
};
</script>

运行结果：改变姓名，全名自动改变；改变全名，姓、名自动分割。

       Vue3的侦听属性，和Vue2的区别是可以同事侦听多个属性了，以数组的形式作为侦听器的第一个参数，第二个参数有两个值，分别是改变后的数据和改变前的数据。

<template>
  <div>
    <button @click="add">+</button>
    <br />
    {{ count }}-----{{name}}
  </div>
</template>
<script>
import { watch, ref } from "vue";
export default {
  setup() {
    const count = ref(0);
    const name = ref('Jevin');
    const add = () => {
      count.value++;
      name.value=name.value+'1'
    };
    watch([count,name], (newValue, oldValue) => {
      console.log("数据变化前", oldValue);
      console.log("数据变化后", newValue);
    });
    return {
      name,
      count,
      add
    };
  }
};
</script>

运行结果打印：

二、生命周期

         Vue3的生命周期钩子函数在setup里移除了beforeCreate和created两个，但由于Vue2的语法在Vue3中也是支持的，所以在setup外，仍可以使用，但是个人不推荐使用。因为onBeforeMount和onMounted这两个生命周期钩子足够使用了。由以下图可以看出，钩子函数变化仅仅是前面加了on而已。                                

三、组件传参

         框架的特点就是单文件组件的运用，Vue的组件传参也是Vue框架的重中之重。

1. 组件通信——父传子

父组件：

<template>
  <div>
    <hello-world :name="name" :money="money"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const name = ref("Jevin");
    const money = ref(0);
    return {
      name,
      money
    };
  }
};
</script>

子组件：子组件接收要先在props中声明，才能在setup中使用

<template>
  <div>
    {{ name }} <br />
    {{ money }} <br />
  </div>
</template>
<script>
export default {
  props: ["name", "money"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里触发
    console.log("props", props.name);
  }
};
</script>

2. 子父组件通信，和Vue2相同，父组件定义，子组件触发。不同的是，不管是方法还是属性，子组件都要声明才能使用。

父组件：

<template>
  <div>
    <hello-world  :money="money" @getMoney="getMoney" />
    已有{{money}}元
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const money = ref(0);
    const getMoney = (value) => {
      money.value = value;
    };
    return {
      money,
      getMoney
    };
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="giveMoney">给父亲买烟钱</button>
  </div>
</template>
<script>
export default {
  // 父组件传过来的方法也要在此声明
  emits: ["getMoney"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里
    const giveMoney=()=>{
      context.emit("getMoney", 1000);
    }
    return{
      giveMoney
    }
  }
};
</script>

3. 依赖注入 peovide、inject,适用于多层级的组件通信。无论层级有多深，都可以检测到数据。

父组件：

<template>
  <div>
    <about />
  </div>
</template>
<script>
import About from "./views/About";
import { provide,ref } from "vue";
export default {
  components: {
    About
  },
  setup() {
    const name =ref('Jevin')
    const sex =ref('male')
    provide("name", name);
    provide("sex", sex);
    return {};
  }
};
</script>

子组件：

<template>
  <div class="about">
    {{ name }}
    {{ sex }}
  </div>
</template>
<script>
import { inject } from 'vue';
export default {
  setup() {
    const name = inject("name");
    const sex = inject("sex");
    return {
      name,
      sex
    };
  }
};
</script>

Vue3学习笔记(1)   http://t.csdn.cn/J93Hc

前端之家企鹅群：610408494

微信：https://s1.ax1x.com/2022/07/18/jo1LyF.png