6.12 vue3的学习

1.创建vue3项目:

在cmd中首先找到需要保存的路径，输入vue create + vue项目的取名，和之前创建vue2是一样的

进行如下选择

 2.vite创建vue3的方式

在cmd中首先输入npm init vue@latest

 3.安装依赖和运行依赖

# 安装依赖 npm install #

# 运行依赖 npm run dev#

4.vue2创建app实例和vue3创建app实例的区别

（1）vue2创建实例的方法:

// 我们使用new vue()创建了一个Vue实例，并传入一个配置对象。配置对象中的el属性指定了Vue实例要挂载的DOM元素的选择器

// data属性定义了Vue实例的数据对象，其中包含一个名为message的属性，初始值为Hello, Vue!。

// methods属性定义了Vue实例的方法，其中包含一个名为reverseMessage的方法，用于反转message的文本。

补充：有this.$store 等this点方法

（2）vue3创建实例的方法:

// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数： import { createApp } from 'vue'

// 挂载 app.mount('#app')

// vue3中没有vue2那样的this点方法

 5.set up方法

/1/ 引入ref函数
import {ref} from "vue";

export default {
  setup(){

/2/ 定义变量和常量的方法

定义变量：var：es5的老语法  let：es6的新语法（之后尽量使用let）

定义常量：const

/3/ 使变量有响应式

let name = ref('ben')

let salary = ref(20000000)

/4/ 想改变渲染方式，value (修改名字)

const handleChange = () =>{
  name.value = 'alien'
  console.log(name)
}
return{name,salary,handleChange}
/5/ 总结：

// 1 要让变量有响应式，要用ref包裹一下，包裹的是数字，布尔，字符串
// 2 js中如果想再对这个变量赋值，变量名后面要加上.value
// 3 temapate中则不需要加上.value
// 4 在后期的使用中，在script写上setup属性后，setup就不需要return值

6.reactive的使用
想让对象有响应式,我们就需要用到reactive

export default {
  setup(){
// 对对象使用响应
let info = reactive({'sect':'华山','skill':'藏锋流云','money':100})

7.监听属性

// 1.vue3监听单个变量

引入模块:
import {ref,reactive,watch} from "vue";

watch(name,(value,oldValue)=>{
  console.log('名字发生了改变')
  console.log(value)
  console.log(oldValue)
})

// 2.监听属性之监听对象

watch(()=>info.name,()=>{
  console.log('info中的name发生了改变')
})

 7.计算属性

//1 导入computed函数

// 2 计算属性

let newName = computed(()=>{

return name + 'xxx'

})

// 3 利用计算属性来修改值

let newName = computed({

get(){},

set(value){}  # 修改计算属性，和他相关联的也要修改

})

8.生命周期

8个生命周期的钩子函数

vue中也是8个，最后两个产生了改变

beforeUnmount

unMounted