Vue--第八天

Vue3

1.优点：

2.创建：

3.文件：

换运行插件：

4.运行：

setup函数：

setup函数中获取不到this（this 在定义的时候是Undefined)

reactive()和ref():

代码：

<script setup>

// reactive :接收一个对象类型的数据。返回一个响应式的对象

import { reactive } from 'vue'

import { ref } from 'vue'

// 只有用 reactive() 包裹的对象才能去响应式改变，否则不能改变

// 倘若是简单类型的对象，我们用ref(),但是这个简单和复杂都可以接受,

// 本质是自动增加了外层对象，使之成为复杂类型，再借助reactive实现的响应式

// 注意点： 1.script中访问数据，需要通过 .value

// 2.template 中不用，因为自动加了.value

// 推荐  数据定义同一用ref()

const state = reactive({

  count: 100

})

const stateTwo = ref(10)

const setCount = () => {

  state.count++

}

const setCountRef = () => {

  stateTwo.value++

}

</script>

<template>

  <div>

    <div>{{ state.count }}</div>

    <div>{{ stateTwo.value }}</div>

    <button @click="setCount">+1</button>

    <button @click="setCountRef">+1</button>

  </div>

</template>

<style></style>

computed:

有读和写两种方法：get 和 set ，但是我们一般用只读，改的话另外写函数

<script setup>

import { ref, computed } from 'vue'

const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])

const computedList = computed(() => {

  // 在这里拿值别忘了 .value

  return list.value.filter(item => item > 5)

})

</script>

<template>

  <div>

    <div>计算后属性：{{ computedList }}</div>

  </div>

</template>

<style></style>

watch函数：

侦听不要加value，我们侦听对象，不是单个数字

immediate:

deep:

代码：

<script setup>

import { ref, watch } from 'vue'

const count = ref(0)

const nickname = ref('张三')

const changeName = () => {

  nickname.value = '李四'

}

const changeCount = () => {

  count.value++

}

// 1.单个对象   这个新值老值是函数固定好了的，不是我们想改就能改的

// watch( count,(newValue,oldValue) => {

//    console.log( newValue,oldValue)

// })

// 2.多个对象

// watch([count,nickname], (newArr,oldArr) =>{

//   console.log(newArr,oldArr)

// })

// 3.immediate: 一进页面就执行，从空数组变为有值的数组

// watch([count, nickname], (newArr,oldArr) => {

//   console.log(newArr,oldArr)

// },{

//    immediate: true

// })

// 4.deep 深度监视默认 watch进行的是浅层监视

// 1.const ref1 = ref(简单类型)可以直接监视

// 2.const ref2 = ref(复杂类型）监视不到复杂类型内部数据的变化

const userInfo = ref({

  name: '张三',

  age: 18

})

const setUserInfo = () => {

  userInfo.value.age++

}

watch(userInfo, (newValue) => {

  console.log(newValue)

}, {

  immediate: true,

  // 不加deep 监视不到对象

  deep: true

})

</script>

<template>

  <div>

    <div>{{ count }}</div>

    <button @click="changeCount">数字</button>

    <div>{{ nickname }}</div>

    <button @click="changeName">昵称</button>

    <div>{{ userInfo }}</div>

    <button @click="setUserInfo">年龄+1</button>

  </div>

</template>

<style></style>

精准监听：

代码：

// 5.对于对象中的属性，进行精准监听,不确定加没加imediate函数

watch(() => userInfo.value.age,(newValue, oldValue) => {

  console.log(oldValue, newValue)

})

5.周期函数：

代码：

<script setup>

import { onMounted } from 'vue';

const getList = () => {

  setTimeout(() => {

    console.log('发送请求获取数据')

  },2000)

}

getList()

// 如果有写代码需要在mounted生命周期中执行

onMounted(() => {

  console.log('mounted生命周期,可以提供多个')

})

</script>

<template>

  <div></div>

</template>

<style></style>

6.父子通信

代码：

<script setup>

import { ref, onMounted } from 'vue'

import sonCom from '@/components/sonCom.vue'

const money = ref(101)

const getMoney = () => {

  money.value = money.value + 10

}

const getList = () => {

  setTimeout(() => {

    console.log('发送请求获取数据')

  },2000)

}

const changeFn = (use) => {

  money.value = money.value - use

}

getList()

// 如果有写代码需要在mounted生命周期中执行

onMounted(() => {

  console.log('mounted生命周期,可以提供多个')

})

 

</script>

<template>

  <div>

    <sonCom car = '宝马车'

    :money="money"

    @changeMoney = 'changeFn'>

  </sonCom>

  </div>

  <button @click="getMoney">挣钱</button>

</template>

<style></style>

<script setup>

// 子组件

// 在这里接收父组件的方式需要借助 '编译器宏'函数，感觉还是以对象的形式封装

const props = defineProps({

    car: String,

    money: Number

})

console.log(props.car)

console.log(props.money)

const emit = defineEmits(['changeMoney'])

const delMoney = () => {

    // 需要emit触发事件

    emit('changeMoney',10)

}

</script>

<template>

    <!-- 对于props传递来的数据，模板中可以直接使用，不用去接收.动态传值也一样 -->

    <div>{{ car }}--{{ money }}</div>

    <div class='son'>我是子组件</div>

    <button @click='delMoney'>花钱</button>

</template>

<style>

.son {

    height: 300px;

    width: 300px;

    border: 2px;

    background-color: greenyellow;

}

</style>

7.模板引用：

通过ref标识获取真实的dom对象或者组件实例对象

代码：

<script setup>

// 模板引用

// 1.调用函数，生成ref对象

// 2.通过ref标识，进行绑定

// 3.通过ref对象.value即可访问到绑定的元素

import {onMounted, ref} from 'vue'

const inp = ref(null)

onMounted(() =>{

  // console.log(inp.value.focus())

  // inp.value.focus()

})

const clickFn = () => {

  inp.value.focus()

}

</script>

<template>

<div>

  <input ref="inp" type = 'text'>

  <button @click="clickFn">点击输入框聚焦</button>

</div>

</template>

<style></style>

8.provide 和inject 

10.defineOptions:

11. v-model 和 defineModel：

需要有如下配置：