大概是vue3的学习记录

---

前言

新公司项目是用的vue3，之前一直使用的vue2，咸鱼被迫学习新东西 ，免得被拍死在沙滩上

---

一、创建应用基本介绍

1.main.js

引入的不是vue构造函数，而是createApp工厂函数然而，创建实例对象其实就相当于vue2中的vm，mount（‘#app’）就相当于$mount(‘#app’)

• 引入vue.js
• 创建Vue实例对象，指定选项(配置)对象
• 在页面模板中使用{{}}或vue指令

代码如下（示例）：

//vue在组件可以拥有多个根节点
<div id="hello-vue" class="demo-st">
</div>
<h2>{{ message }}<h2>

<!-- 在script里写vue代码 -->
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!!'
            }
        }
    }
    // 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

2.常用Composition API

1. setup函数（入口）

理解：Vue3.0中一个新的额配置项，值为一个函数

• setup是所有Composition API(组合api) “表演的舞台”

• 组件中所用到的：数据、方法等等，均要配置在setup中

• setup函数的两种返回值（在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用）：
  若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
  若返回一个渲染函数：则可以自定义渲染内容。

  注意：
  1. setup比beforeCreate和created这两个生命周期还要快，就是说，setup在beforeCreate,created前，它里面的this打印出来是undefined
  2.setup可以接受两个参数，第一个参数是props,也就是组件传值，第二个参数是context,上下文对象
  3.context里面还有三个很重要的东西attrs，slots,emit，它们就相当于vue2里面的this.$ attrs,this.$ slots,this.$emit。

import { reactive } from 'vue'
export default {
  props: {
    title: String
  },
  
  setup () {
  /*
	1.从vue引入reactive
	2.使用reactive()方法来声名我们的数据为响应性数据
	3.使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数
	*/
	//state.username
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
   /*这里把数据放入data属性中
   data () {
    return {
      username: '',
      password: ''
    }
  },
  */
   //方法
    const login = () => {
      // 登陆方法
    }
  /*
    methods: {
    login () {
      // 登陆方法
    }
  },
  components:{
            "buttonComponent":btnComponent
        },
  //计算属性
  computed:{
	  fullName(){
	    return this.firstName+" "+this.lastName;     
	  }
  */
    return { 
      login,
      state
    }
  }
}

2.ref 函数

• 作用：定义一个响应式的数据
• 语法： const xxx = ref(initValue)
  创建一个包含响应式数据引用对象（reference对象） JS中操作数据：xxx.value 模板中读取数据：不需要.value，直接：{{xxx}}
• 备注： 接收的数据可以是：基本类型、也可以是对象类型
  基本类型的数据：响应式依然靠的是Object.defineProperty()的get和set完成的
  对象类型的数据： 内部”求助“了Vue3.0中的一个新的函数——reactive函数

const r = ref("hello")
console.log(r)	// RefImpl {_rawValue: "hello", _shallow: false, __v_isRef: true, _value: "hello"}
console.log(r.value)	// hello

3.reactive 函数

• 作用：定义一个对象类型的响应式数据（基本类型别用他，用ref函数）
• 语法：const 代理对象 = reactive(被代理对象)接收一个对象（或数组）,返回一个代理对象（proxy对象）
• reactive定义的响应式数据是”深层次的“
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

const r2 = reactive("hello")
console.log(r2)	// value cannot be made reactive: hello

const r3 = reactive({name:"hello"})
console.log(r3)	//  Proxy {name: "hello"}
console.log(r3.name)	// hello

4.toRef，toRefs

• toRef 可以用来为一个 reactive 对象的属性创建一个 ref

• 这个 ref 可以被传递并且能够保持响应性

• toRef的本质是引用关系，与原始数据存在关联性

• toRef当数据发生改变时，界面不会自动更新

• toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，相当于变成一个个的ref()

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

<p>{{name}}</p>	// trist
import { reactive,toRefs } from 'vue';

setup {
	const data = reactive({
		name: "trist",
		age: 22,
		sex: "boy"
	})
	
	console.log(data.age) // 22
	
	return {
		...toRefs(data)
	}
}

5.computed，watch与watchEffect

1. watchEffect
   和vue2的监视用法差不多

 watchEffect(() => {
            if (formState.content) {
                data.showBack()
            }
        })

3.组件传值

//父组件
<script setup>
import HelloWorld from './components/test3.vue';
const hello = (val) =>{
  console.log('传递的参数是：'+ val);
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="传递吧" @hello="hello">
    <template v-slot:cacao>
      <span>是插槽吗</span>
    </template>
    <template v-slot:qwe>
      <span>meiyou</span>
    </template>

  </HelloWorld>
</template>

//子组件
export default {
    name: 'test3',
    props: ['msg'],
    emits:['hello'],
    //这里setup接收两个参数，一个是props，一个是上下文context
    setup(props,context){
        /**
         * props就是父组件传来的值，但是他是Porxy类型的对象
         * >Proxy:{msg:'传递吧'}
         * 可以当作我们自定义的reactive定义的数据
         */

        /**
         * context是一个对象 包含以下内容：
         * 1.emit触发自定义事件的 
         * 2.attrs 相当于vue2里面的 $attrs 包含：组件外部传递过来，但没有在props配置中声明的属性
         * 3.slots 相当于vue2里面的 $slots
         * 3.expose 是一个回调函数
         */
        console.log(context.slots);
        let person = reactive({
            name: '张三',
            age: 17,
        })

        

        function changeInfo(){
            context.emit('hello', 666)
        }

        //返回对象
        return {
            person,
            changeInfo
        }

        //返回渲染函数（了解） 这个h是个函数
        //return () => h('name','age')
    }
}
</script>

---

总结

还在学习中。。。