前端路线--Vue3(day01)

setup(){}的使用

<template>
  <div class="home">
    <h2>{{ msg }}</h2>
    <ul>
      <li v-for="userlist in userlists" :key="userlist.id">
        {{ userlist.tit }}
      </li>
    </ul>
    <button @click="helloFn">点击触发函数</button>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
  // 组合API:一个功能逻辑的代码组合在一起,包括(数据和函数)
  /* 
  setup(){}:组合API的起点
    // - 从组件生命周期来看，相当于vue2.x的beforeCreate生命周期。
  // - 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
  // - 在模版中需要使用的数据和函数，需要在 return返回。
  */
  setup() {
    // 定义的数据
    let msg = "Hi,LiLei!";
    let userlists = [
      {
        id: 1,
        tit: "李明1",
      },
      {
        id: 2,
        tit: "王五2",
      },
    ];
    let helloFn = () => {
      console.log("Hello Fn!");
    };
    return {
      //返回的数据
      msg,
      userlists,
      helloFn,
    };
  },
};
</script>

生命周期

<template>
  <div class="life">
    <h2>{{ msg }}</h2>
    <button @click="actUpdateLifeFn">点击触发更新生命周期</button>
  </div>
</template>
<script>
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
export default {
  setup() {
    let msg = ref("erge");
    let actUpdateLifeFn = () => {
      msg.value = "hello";
    };
    // - setup              //创建实例前
    // 注意事项:1.组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。
    //        2.一定要按需引入
    console.log("实例创建前");
    // - onBeforeMount      //挂载DOM前
    onBeforeMount(() => {
      console.log("元素挂载前");
    });
    // - onMounted          //挂载DOM后
    onMounted(() => {
      console.log("元素挂载后");
    });
    // - onBeforeUpdate     //更新前
    onBeforeUpdate(() => {
      console.log("元素更新前");
    });
    // - onUpdated          //更新后
    onUpdated(() => {
      console.log("元素更新后");
    });
    // - onBeforeUnmount    //销毁前
    onBeforeUnmount(() => {
      console.log("组件销毁前");
    });
    // - onUnmounted        //销毁后
    onUnmounted(() => {
      console.log("组件销毁后");
    });
    return {
      msg,
      actUpdateLifeFn,
    };
  },
};
</script>

转换为响应式数据

<template>
  <h2>好谷--{{ users.username }}</h2>
  <h2>{{ username }}</h2>
  <h2>{{ age }}</h2>
  <button @click="changeUserName">点击修改</button>
  <h2>{{ title }}</h2>
  <button @click="changeTitle">点击修改标题</button>
</template>
<script>
import { reactive, ref, toRef, toRefs } from "vue";
export default {
  setup() {
    // Vue3.x的响应式数据
    // 1.reactive()--将复杂数据类型定义为响应式,通常定义为响应式对象
    let users = reactive({
      username: "二哥",
      age: 18,
    });
    let changeUserName = () => {
      users.username = "二哥666";
    };

    // 2.toRef()--将响应式对象中某个属性变为单独响应式数据,并且值是关联的
    //toRef(对象,"对象的属性名")
    let username = toRef(users, "username");

    //3.roRefs()--将响应式对象中所有属性变为单独响应式数据,并且值是关联的
    //roRefs(对象)
    let userCollections = toRefs(users);

    //4.ref()--将单个数据变为响应式
    let title = ref("标题");
    let changeTitle = () => {
      // 获取到title的值,并且修改(因为在最初的生命周期没有this)
      console.log(title.value);
      title.value = "标题改变了";
    };
    return {
      users,
      changeUserName,
      username,
      //   使用扩展运算符把对象里的内容提取出来
      ...userCollections,
      //单个的响应式数据
      title,
      changeTitle,
    };
  },
};
</script>

hooks钩子

<template>
  <div class="">
    <h2>{{ msg }}--{{ age }}</h2>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs } from "vue";
//引入hooks钩子
import { HaoGu } from "@/hooks/useHaoGu.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    let Haogu = HaoGu();
    console.log(Haogu);
    //这里存放数据
    const data = reactive({
      msg: "信息",
    });
    const data2 = toRefs(data);
    return {
      ...data2,
      //   将返回的Haogu对象里的每个属性变为响应式
      ...toRefs(Haogu),
    };
  },
};
</script>

<style lang="less" scoped>
</style>

couputed()计算属性

<template>
  <div class="">
    <h2>{{ msg }}--{{ newMsg }}</h2>
    <button @click="changeNum">点击更改计算属性</button>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { computed, reactive, ref, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);

    let msg = ref(10);
    // computed(callback)--计算属性,计算属性不能修改。
    let newMsg = computed(() => {
      return msg.value * 10;
    });
    let changeNum = () => {
      msg.value++;
    };
    return {
      ...data2,
      msg,
      newMsg,
      changeNum,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

06-watch()监视器

<template>
  <div class="">
    <h2>{{ num }}</h2>
    <button @click="changeNum">改变num</button>
    <h2>{{ userInfo.name }}--{{ userInfo.age }}--{{ userInfo.height }}</h2>
    <button @click="changeHeight">改变身高</button>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, ref, toRefs, watch } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    //这里存放数据
    const data = reactive({
      userInfo: {
        name: "二哥",
        age: 18,
        height: 175,
      },
    });
    const data2 = toRefs(data);

    let num = ref(100);
    let changeNum = () => {
      num.value++;
    };
    let changeHeight = () => {
      data.userInfo.height++;
    };
    // 1.watch(监听的对象,callback)监听器--可以监听到响应式数据的变化
    watch(num, (newVal, oldVal) => {
      console.log("新值" + newVal, "旧值" + oldVal);
    });

    //2.深度监听 watch(监听的对象,callback,{deep:true,immediate:true})
    watch(
      data.userInfo,
      () => {
        console.log(111);
      },
      {
        // 深度监视
        deep: true,
        // 开局就执行依次监视
        immediate: true,
      }
    );

    return {
      ...data2,
      num,
      changeNum,
      changeHeight,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

笔记