前端学习——Vue (Day8)

Vue3

在这里插入图片描述

create-vue搭建Vue3项目

在这里插入图片描述
注意要使用nodejs16.0版本以上，windows升级node可以西安使用where node查看本地node位置，然后到官网下载msi文件，在本地路径下安装即可

安装完可以使用node -v检查版本信息

项目目录和关键文件

在这里插入图片描述

组合式API - setup选项

在这里插入图片描述

<script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
export default{
  setup(){
    // console.log('setup函数',this);
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script>

<template>
  <div>学习Vue3</div>
</template>

在这里插入图片描述

<script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
// 3. 数据和函数，需要在setup最后return才能在模板中应用
export default{
  setup(){
    // console.log('setup函数',this);
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

在这里插入图片描述

<!-- <script>
// setup函数
// 1. 执行时机：比beforeCreate还要早
// 2. setup函数中，获取不到this（this是undefined）
// 3. 数据和函数，需要在setup最后return才能在模板中应用
export default{
  setup(){
    // console.log('setup函数',this);
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  }
}
</script> -->

<script setup>
const message = 'hello Vue3'
const logMessage=()=>{
  console.log(message)
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

在这里插入图片描述

组合式API - reactive和ref函数

reactive()

在这里插入图片描述

<script setup>
// reactive语法：接受对象类型数据的参数传入，并返回一个响应式的对象
import { reactive } from 'vue';
const state = reactive({
  count:100
})
const setCount=()=>{
  state.count++
}
</script>

<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

在这里插入图片描述

ref()

在这里插入图片描述

<script setup>
// reactive语法：接受对象类型数据的参数传入，并返回一个响应式的对象
// import { reactive } from 'vue';
// const state = reactive({
//   count:100
// })
// const setCount=()=>{
//   state.count++
// }

// 如果是简单类型，怎么办？
// 脚本中访问数据，需要通过value
// 在template中，.value不需要加
import { ref } from 'vue'
const count = ref(0)
const setCount=()=>{
  count.value++
}
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

在这里插入图片描述
日后编码统一使用ref()

组合式API - computed

在这里插入图片描述

<script setup>
// const 计算属性 = computed(() => {return计算返回的结果})

import { computed, ref } from "vue";
// 声明数据
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);

// 基于list派生一个计算属性，从list中过滤出大于2
const computedList = computed(() => {
  return list.value.filter((item) => item > 2);
});

// 定义一个修改数组的方法
const addFn=()=>{
  list.value.push(666)
}
</script>

<template>
  <div>原始数据：{{ list }}</div>
  <div>计算后的数据：{{ computedList }}</div>
  <button @click="addFn" type="button">修改</button>
</template>

在这里插入图片描述

组合式API - watch

在这里插入图片描述

基础使用 - 侦听单个数据

在这里插入图片描述

基础使用 - 侦听多个数据

在这里插入图片描述

<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
watch([count,nickname],(newArr,oldArr)=>{
  console.log(newArr,oldArr)
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
</template>

在这里插入图片描述

immediate

在这里插入图片描述

deep

在这里插入图片描述

<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// })

// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
// watch([count,nickname],(newArr,oldArr)=>{
//   console.log(newArr,oldArr)
// })

// 3.immediate立即执行
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// },{
//   immediate:true
// })

// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo = ref({
  name:'张三',
  age:18
})
const setUserInfo=()=>{
  // 修改了useInfo.value 修改了对象的地址,才能监视到
  // useInfo.value = {name : 'ls',age:50}
  useInfo.value.age++
}
watch(useInfo,(newValue)=>{
  console.log(newValue)
},{
  deep:true
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
  <div>{{ useInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>

在这里插入图片描述

精确侦听对象的某个属性

在这里插入图片描述

<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')

const changeCount=()=>{
  count.value++
}
const changeName=()=>{
  nickname.value = '里四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue)=>{...})
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// })

// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr)=>{...})
// watch([count,nickname],(newArr,oldArr)=>{
//   console.log(newArr,oldArr)
// })

// 3.immediate立即执行
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue)
// },{
//   immediate:true
// })

// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo = ref({
  name:'张三',
  age:18
})
const setUserInfo=()=>{
  // 修改了useInfo.value 修改了对象的地址,才能监视到
  // useInfo.value = {name : 'ls',age:50}
  useInfo.value.age++
}

// 4. deep深度监视 
// watch(useInfo,(newValue)=>{
//   console.log(newValue)
// },{
//   deep:true
// })

// 5. 对于对象中的属性,进行监视
watch(()=>useInfo.value.age,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeName">改昵称</button>
  <div>{{ useInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>

在这里插入图片描述

组合式API - 生命周期函数

在这里插入图片描述

生命周期函数基本使用

在这里插入图片描述

执行多次

在这里插入图片描述

<script setup>

import { onMounted } from 'vue';
// beforeCreated 和 created 的相关代码放在 setup 中执行
const getList = () =>{
  setTimeout(()=>{
    console.log('发送请求,获取数据')
  },2000)
}

// 已进入页面的请求
getList()

// 如果有写代码需要在mounted生命周期中执行
onMounted(()=>{
  console.log('mounted生命周期函数')
})
// 可调用多次,不会冲突,按照顺序依次执行
onMounted(()=>{
  console.log('mounted生命周期函数1')
})
</script>

<template>
  <div></div>
</template>

在这里插入图片描述

组合式API - 父子通信

组合式API下的父传子

在这里插入图片描述

<script setup>
// 注意:由于写了setup,所以无法直接配置props
// 此处要借助于编译器宏函数接收
const props = defineProps({
    car:String,
    money:Number
})
console.log(props.car)
console.log(props.money)
</script>

<template>
  <div class="son">我是子组件 - {{ car }}</div>
</template>

<style scoped>
.son {
    border: 1px solid #000;
    padding: 30px;
}

</style>

<script setup>
import SonCom from '@/components/son-com.vue'
import {ref} from 'vue'
// 局部组件导入进来就能用
const money = ref(100)
const getMoney = () => {
  money.value+=10
}
</script>

<template>
  <div>
    <h1>
      父组件 - {{ money }}
      <button @click="getMoney">挣钱</button>
    </h1>
    <!-- 给子组件,以添加属性的方式传值 -->
    <SonCom car="宝马车" :money="money"></SonCom>
  </div>
</template>

在这里插入图片描述

组合式API下的子传父

在这里插入图片描述

组合式API - 模版引用

在这里插入图片描述

如何使用（以获取dom为例组件同理）

在这里插入图片描述

defineExpose()

在这里插入图片描述

组合式API - provide和inject

在这里插入图片描述

跨层传递普通数据

在这里插入图片描述

跨层传递响应式数据

在这里插入图片描述

跨层传递方法

在这里插入图片描述

<script setup>
import CenterCom from "@/components/center-com.vue";
import { provide, ref } from "vue";

// 1.跨层传递普通数据
provide("theme-color", "pink");

// 2.跨层传递响应式数据
const count = ref(100);
provide("count", count);

setTimeout(() => {
  count.value = 500;
}, 2000);

// 3.跨层级传递函数,给子孙后代传递可以修改数据的方法
provide("changeCount", (newCount) => {
  count.value = newCount;
});
</script>

<template>
  <div>
    <h1>顶层组件</h1>
    <CenterCom></CenterCom>
  </div>
</template>

<script setup>
import BottomCom from './bottom-com.vue'

</script>

<template>
  <div>
    <h2>中间组件</h2>
    <BottomCom></BottomCom>
  </div>
</template>

<script setup>
import {inject} from 'vue'
const themeColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')
const clickFn=()=>{
    changeCount(1000)
}
</script>

<template>
  <div>
    <h3>底层组件 - {{ themeColor }} - {{ count }}</h3>
    <button @click="clickFn">更新count</button>
  </div>
</template>