Vue3 withDirectives用法 vue3使用

创建Vue3项目

方式一：
    使用vue-cli：vue的脚手架----->创建vue项目----->构建vue项目----->前端工具链
    创建方式还是和之前一样，Vue版本要选择Vue3的版本
方式二：
    使用vite创建：
    vite：https://cn.vitejs.dev/
        ：npm create vue@latest
        
运行Vue项目：
    -vue-cli跟之前一样
    -vite 创建的：npm install   npm run dev

编程语言中的链式调用

# 编程语言的链式调用
	对象.changeName('lqz').printName().showAge()
    
# python 如何实现链式调用
	class Person:
        def changeName(self,name):
            self.name=name
            return self
        def printName(self):
            print(self.name)
            return self

setup函数

setup 的两个注意点：
	# setup什么时候执行的
    	在beforCreate之前执行一次，this是undefined
    # setup的参数
        props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
        context：上下文对象
        attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
            slots: 收到的插槽内容, 相当于 this.$slots。
                emit: 分发自定义事件的函数, 相当于 this.$emit。
                    
总结：
    setup执行是在beforeCreate，没有this对象
    如果写setup函数，想接收父组件自定义属性传入的值，需要
        export default {
            setup(props) {
                console.log(props.msg)
            },
            props: ['msg']
        }
        
    如果是vue3的最新写法，想接收父组件自定义属性传入的值，需要
        <script setup>
        defineProps(['msg'])
        </script>

<template>
  <div class="home">
    <h1>这是首页</h1>
    <p>我叫：{{ name }}</p>
    <p>我的年龄：{{ age }}</p>
    <hr>
    <button @click="handeruserinfo">点我查看信息</button>
  </div>
</template>

<script>

export default {
  setup() {
    // 定义数据
    let name = "杨赋华"
    let age = 18
    // 定义方法
    const handeruserinfo = () => {
      console.log(name, age)
      alert(`我的名字是:${name},我的年龄是${age}`)
    }
    return {
      name, age, handeruserinfo
    }
  }
}
</script>

ref 函数

<template>
  <div class="home">
    <h1>这是首页</h1>
    <p>我叫：{{ name }}</p>
    <p>我的年龄：{{ age }}</p>
    <hr>
    <button @click="handeruserinfo">点我查看信息</button>
    <hr>
    <button @click="handeradd">点我年龄加一</button>
    <hr>
    <button @click="handerone">点我变彭于晏</button>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  setup() {
    let name = ref("杨赋华")
    let age = ref(18)
    const handeruserinfo = () => {
      console.log(name, age)
      alert(`我的名字是:${name},我的年龄是${age}`)
    }
    // 变量要具备响应式--->页面内容变化，变量和变，变量变化，页面也变
    // 普通变量，通过ref绑定响应式
    // 引用类型变量：通过reactive 绑定响应式
    const handeradd = () => {
      // 使用ref之后真正的数据就放在value中
      age.value += 1
    }
    const handerone = () => {
      name.value = "彭于晏"
    }
    return {
      name, age, handeruserinfo, handeradd, handerone
    }
  }
}
</script>

reactive函数

<template>
  <div class="home">
    <h1>这是首页</h1>
    <p>我叫：{{ data.name }}</p>
    <p>我的年龄：{{ data.age }}</p>
    <br>
    <button @click="handeradd">点我年龄++</button>
    <hr>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  setup() {
    let data = reactive({
      name: "晁梦圆",
      age: 18
    })
    let handeradd = () => {
      data.age++
    }
    return {
      data,handeradd
    }
  },
  components: {
    HelloWorld
  }
}
/*
ref：
	作用：
		定义一个响应式数据
	语法：
		const xxx = ref("value")
	创建一个包含响应式数据的引用对象（reference，简称ref对象）
	JS中操作数据： xxx.value
	模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
	备注：
		接受的数据可以是：基本类型（值类型），也可以是对象（引用类型）类型。
		
reactive：
	作用：
		定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
	语法：
		const 代理对象 = reactive（源对象）接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
	reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式
	
# 总结：
  如果用基本数据类型：数字，字符串，布尔，用ref做响应式
  如果是对象类型，用ref和reactive都可以，但是建议使用reactive
  如果使用ref包裹对象类型，多了一层value

*\
</script>

计算监听属性

<template>
  <div class="home">
    <h1>这是首页</h1>
    <input type="text" v-model="name.fisterName">
    <input type="text" v-model="name.lastName">
    <hr>
    <input type="text" v-model="fullName">
    <hr>
    <button @click="age++">点我年龄++</button>
  </div>
</template>

<script>
import {ref, reactive, computed, watch, watchEffect} from "vue";

export default {
  setup() {
    let name = reactive({
      fisterName: "彭于晏",
      lastName: "大帅哥"
    })
    let fullName = computed({
      get() {
        return name.fisterName + "_" + name.lastName
      },
      set(value) {
        // 当我修改fullName的时候，我的fisterName和lastName也发生改变
        const nameArr = value.split("_")
        name.fisterName = nameArr[0]
        name.lastName = nameArr[1]
      }
    })
    let age = ref(19)
    // 监听属性
    watch(age, (newValue, oldValue) => {
      console.log(newValue)
      console.log(oldValue)
    })
    // 监听对象
    watch(() => name.fisterName, (newValue, oldValue) => {
      console.log(oldValue)
      console.log(newValue)
    })
    // watchEffect函数
    watchEffect(() => {
      const x1 = age.value
      const x2 = name.fisterName
      console.log('watchEffect配置的回调执行了')
    })
    return {
      name, fullName, age
    }
  }
}
</script>

生命周期

# vue2 生命周期---8个

# vue3 变了
	-想把生命周期写下setup函数中
    	
    -把生命周期写在配置项中
        beforeDestroy改名为 beforeUnmount
        destroyed改名为 unmounted
        
        beforeCreate
        created
        beforeMount 
        mounted
        beforeUpdate
        updated
        beforeUnmount 
        unmounted

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

import axios from "axios";
import {
  computed,
  watch,
  reactive,
  ref,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: 'HomeView',
  setup() {

    // 第一个beforeCrete
    console.log('我是beforeCrete')

    // 第二个Creted
    let name = ref('lqz')
    console.log('Creted')
    // axios.get().then(res => {
    //   name.value = res.data.name
    // })

    // 直接启动定时器
    let t = setInterval(() => {
          console.log('lqz')
        }, 3000
    )
    // 第三个：onBeforeMount
    onBeforeMount(() => {
      console.log('挂载了')
    })

    onBeforeUnmount(() => {
      clearInterval(t)
      t = null

    })


    return {}


  },


}


</script>

torefs

<template>
  <div class="home">
    <h1>首页</h1>
    {{ name }}------>{{ age }}
  </div>
</template>

<script>
import {ref, reactive, computed, watch, watchEffect, toRefs} from "vue";
import axios from "axios";

export default {
  name: "HomeView",
  setup() {
    let data = reactive({
      name: "XXX",
      age: 18
    })
    return {
      ...toRefs(data)
    }
  }
}
// 对象的解压赋值
let data = {"name": "XXX", "age": 18}
let dict = {...data, hobby: "篮球"}
console.log(dict) // {name: 'XXX', age: 18, hobby: '篮球'}
</script>

setup写法

# 以后vue3推荐，把setup函数的代码，直接写在script中
<script setup>
定义变量
写函数
不用return，在html中直接使用
</script>

# 使用组件，直接导入，不需要配置，直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用：<HelloWorld msg="NB"></HelloWorld>

# 自定义属性，在子组件中接收
    <script setup>
    defineProps({
      msg: {
        type: String,
        required: true
      }
    })
    </script>