Vue3学习

Vue指令

v-show：控制隐藏

v-if / v-else：条件判断

v-on：注册事件

v-bind：动态设置html的标签属性

v-for：数据循环

v-model：表单元素，双向绑定  unshift修改原数组添加

生命周期

创建、挂载、更新、销毁

生命周期函数（钩子函数）

八个，每个阶段两个、成对出现

三个常用：created（创建）、mounted（挂载） ---> destroyed

Vue入门

Vue是一个构建用户界面的渐进式框架

框架：（完整的项目解决方案）

Vue的两种使用方式：

1. Vue核心包开发   场景：局部模块改造
2.  Vue核心包&Vue插件工程化开发  场景：整站开发

创建vue3项目

npm init vue@latest

组合式API - setup选项

<script>
  export default{
    setup(){
      console.log('setup')
      const message = 'this is message'
      const logMessage = () => {
        console.log(message)
      }
      return {
        message,
        logMessage
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
</script>

<script setup>
  const message = 'this is message'
  const logMessage = () => {
     console.log(message)
  }
</script>
<template>
  <div>
    {{message}}
    <button @click="logMessage"> log </button>
  </div>
</template>

组合式API - reactive和ref函数

reactive() 传入一个对象类型的参数返回响应式对象

<script setup>
  //1. 导入函数
  import { reactive } from 'vue'

  //2. 执行函数 传入一个对象类型的参数 变量接收
  const state = reactive({
    count: 0
  })
  const setCount = () => {
    state.count++
  }
</script>
<template>
  <div>
    <button @click="setCount">{{state.count}}</button>
  </div>
</template>

ref() 传入简单类型或对象类型的参数返回响应式对象

<script setup>
  //1.导入ref函数
  import { ref } from 'vue'
  //2. 执行函数
  const count = ref(0)
  console.log(count)
  const setCount = () => {
    //脚本区域修改ref产生的响应式对象数据 必须通过.value属性
    count.value++
  }
</script>
<template>
  <div>
    <button @click="setCount">{{count}}</button>
  </div>
</template>

组合式API-computed计算属性函数

<script setup>
  // 原始响应式数组
  import { ref } from 'vue'
  //1. 导入computed
  import { computed } from 'vue'
  const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
  //2. 执行函数 return计算之后的值 变量接收
  const computedList = computed(() => {
     //做计算 
    return list.value.filter(item => item > 2)
  })

  setTimeout(() => {
    list.value.push(9, 10)
  }, 3000)

</script>
<template>
  <div>
    原始响应式数组- {{ list }}
  </div>
  <div>
    计算属性数组- {{computedList}}
  </div>
</template>

组合式API-watch函数

侦听一个或者多个数据的变化，数据变化时执行回调函数

两个额外参数：

1. immediate (立即执行)
2. deep (深度侦听)

<script setup>
  // 原始响应式数组
  import { ref, watch } from 'vue'
  const count = ref(0)
  const setCount = () => {
    count.value++
  }
  // watch 侦听单个数据源
  //ref对象不需要加.value
  watch(count, (newVal, oldVal)  => {
    console.log('count变化了', newVal, oldVal)
  })
</script>
<template>
  <button @click="setCount">+{{ count }}</button>
</template>

<script setup>
  // 原始响应式数组
  import { ref, watch } from 'vue'
  const count = ref(0)
  const changeCount = () => {
    count.value++
  }

  const name = ref('cp')
  const changeName= () => {
    name.value = 'pc'
  }
  // watch 侦听多个个数据源

  watch(
    [count, name], 
    ([newCount, newName], [oldCount, oldName])  => {
    console.log('count或者name变化了', [newCount, newName], [oldCount, oldName])
  })
</script>
<template>
  <div>
    <button @click="changeCount">修改count--{{ count }}</button>
  </div>
  <div>
    <button @click="changeName">修改name--{{ name }}</button>
  </div>
</template>

<script setup>
  //立即执行函数
  import { ref, watch } from 'vue'
  const count = ref(0)
  console.log(count)
  const setCount = () => {
    count.value++
  }

  watch(count, () => {
    console.log('count变化了')
  },{
    immediate:true
  })
</script>
<template>
  <div>
    <button @click="setCount">+{{count}}</button>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const state = ref({ count:0 })
  const changeStateCount = () => {
    state.value.count++
  }
  //watch深度侦听
 watch(state, () => {
  console.log('count变化了')
 }, {
  deep:true
 })
</script>
<template>
  <div>
    {{ state.count }}
    <button @click="changeStateCount">通过count修改</button>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const state = ref({
     name: 'chaichai',
     age:18
  })
  const changeName = () => {
    state.value.name = 'chaichai123'
  }

  const changeAge= () => {
    state.value.age = 20
  }
  //精确侦听
  watch(
    () => state.value.age,
    () => {
      console.log('age变化了')
    }
  )
  //性能损耗 尽量不开启deep
</script>
<template>
  <div>当前name -- {{state.name}}</div>
  <div>当前age -- {{state.age}}</div>
  <div>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

组合式API-生命周期函数

<script setup>
  //生命周期函数
  // 1. 导入函数
  import { onMounted } from 'vue'

  //2. 执行函数 传入回调
  onMounted(() => {
    console.log('组件挂载完毕mounted执行了1')
    //好多逻辑
  })
  onMounted(() => {
    console.log('组件挂载完毕mounted执行了3')
    //补充逻辑
  })
  onMounted(() => {
    console.log('组件挂载完毕mounted执行了2')
  })
</script>
<template>
  <div>
  
  </div>
</template>

组合式API - 父子通信

父传子

defineProps宏函数

<script setup>
  //setup语法糖下局部组件无需注册直接可以使用
  import { ref } from 'vue';
  import SonCom from './son-com.vue'
  const count = ref(100)
  setTimeout(() => {
    count.value = 200
  }, 3000)
</script>
<template>
  <div class="father">
    <h2>父组件App</h2>
    <!-- 1. 绑定属性 -->
    <SonCom :count="count" message="father message" />
  </div>
</template>

<style scoped>

</style>

<script setup>
  //2. defineProps接收数据
  const props = defineProps({
    message: String,
    count: Number
  })
  console.log(props)
</script>

<template>
    <div class="son">
        <h3>子组件Son</h3>
        <div>
            父组件传入的数据 - {{ message }} - {{ count }}
        </div>
    </div>
</template>
<style scoped>

</style>

子传父

defineEmits宏函数

<script setup>
  import SonCom from './son-com.vue'
  const getMessage = (msg) => {
    console.log(msg)
  }
</script>
<template>
  <div class="father">
    <h2>父组件App</h2>
    <!-- 1. 绑定事件 -->
    <SonCom @get-message="getMessage"/>
  </div>
</template>

<style scoped>

</style>

<script setup>
//2. 通过definrEmits() -> emit(this.$emit)
const emit = defineEmits(['get-message'])
  const sendMsg = () => {
    //触发自定义事件 传数据给父组件
    emit('get-message', 'this is son message')
  }
</script>

<template>
    <div class="son">
        <h3>子组件Son</h3>
        <div>
            <button @click="sendMsg">触发自定义事件</button>
        </div>
    </div>
</template>
<style scoped>

</style>

组合式API - 模板引用

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

获取模板引用的时机是组件挂载完毕

<script setup>
  import { onMounted, ref } from 'vue';
  import TestCom from './test-com.vue'

  //1. 调用ref函数 -> ref对象
  const h1Ref = ref(null)
  const comRef = ref(null)

  //组件挂载完毕之后才能获取
  onMounted(() => {
    console.log(h1Ref.value)
    console.log(comRef.value)
  })
</script>
<template>
  <!-- 2. 通过ref标签标识绑定ref对象 -->
  <h1 ref="h1Ref">我是dom标签h1</h1>
  <TestCom ref="comRef"/>
</template>

defineExpose 编译宏

<script setup>
  import { ref } from 'vue'

  const name = ref('test name')
  const setName = () => {
    name.value = 'test new name'
  }

  defineExpose({
    name,
    setName
  })
</script>

<template>
    <div>我是test组件</div>
</template>

组合式API - provide和inject

实现跨层组件通信

<script setup>
import RoomMsgItem from 'room-msg-item.vue'
import { provide, ref } from 'vue';
//组件嵌套关系
//RoomPage -> RppmMsgItem -> RoomMsgComment

//1.顶层组件提供数据
provide('data-key', 'this is room data')

//响应式数据
const count = ref(0)

provide('count-key', count)
setTimeout(() => {
  count.value = 100
}, 3000)

//传递方法(谁的数据谁负责修改)
const setCount = () => {
  count.value++
}
provide('setCount-key', setCount)
</script>
<template>
  <div class="page">
    顶层组件
    <RoomMsgItem />
  </div>
</template>
<style scoped>

</style>

<script setup>
import { inject } from 'vue'
//2.接收数据
const roomData = inject('data-key')

//接收响应式数据
const CountData = inject('count-key')

//接收方法
const setCount = inject('setCount-key')
</script>
<template>
  <div class="comment">
    底层组件
    <div>
        来自顶层组件中的数据为：{{ roomData }}
    </div>
    <div>
        来自顶层组件的响应式数据为：{{ CountData }}
    </div>
    <div>
      <button @click="setCount">修改顶层组件的数据count</button>
    </div>
  </div>
</template>
<style scoped>

</style>

Pinia入门--状态管理库 -- 新一代的vuex

1. 提供更加简单的API（去掉了mutation）
2. 提供符合组合式风格的API（和Vue3新语法统一）
3. 去掉了modules的概念，每一个store都是一个独立的模块
4. 搭配TypeScript一起使用提供可靠的类型推断

getters实现

computed计算属性函数

异步action

action既支持同步也支持异步

storeToRefs

storeToRefs辅助保持数据的响应式解构