从零开始vue3

首先打开cmd 然后cd选择新创建的文件 然后npm create vue或者npm create vue@latest

然后是否使用 TypeScript 语法？ ... 否 / 是 选是 其他的都选否

然后打开vscode 下载插件TypeScript Vue Plugin

然后npm i

如果卡住加载不出来

执行以下命令查看是否为国内镜

 npm config get registry

如果不是则换成国内镜像，执行以下命令

npm config set registry=https://registry.npmmirror.com 
 
//执行以下命令查看是否配置成功
npm config get registry

第二种方案、删除node_modules重新npm install

想运行的话npm run dev

首先是main.ts是什么

import { createApp } from 'vue'     //花盆

import App from './App.vue'      //组件

createApp(App).mount('#app')    //把组件放进花盆里面，然后挂在#app组件上面

======================================================================

创建src

在目录下面创建main.ts还有App.vue

在创建一个components文件夹，下面在创建一个Person.vue

Person.vue

<template>
    <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">年龄+1</button>
      <button @click="showTel">点我查看联系方式</button>
    </div>
  </template>
  
  <script lang="ts">
    export default {
      name:'App',
      data() {
        return {
          name:'张三',
          age:18,
          tel:'13888888888'
        }
      },
      methods:{
        changeName(){
          this.name = 'zhang-san'
        },
        changeAge(){
          this.age += 1
        },
        showTel(){
          alert(this.tel)
        }
      },
    }
  </script>

App.vue

<template>
    <div class="app">
      <h1>你好啊！</h1>
      <Preson/>
      <Preson/>
      <Preson/>
    </div>
  </template>
  
  <script lang="ts">
    import Preson from './components/Preson.vue';
    export default {
      name:'App', //组件名
      components:{Preson} //注册组件
    }
  </script>
  
  <style>
    .app {
      background-color: #ddd;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
    }
  </style>

main.ts

import { createApp } from 'vue';
import App from './App.vue';


createApp(App).mount('#app');

======================================================================

setup

`setup`是`Vue3`中一个新的配置项，值是一个函数

修改上面的Person.vue

此时点击三个按钮后，name,age,tel都不是响应式，都不能点击按钮后被修改

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'    //name也不是响应式
      let age = 18    //此时age不是响应式
      let tel = '13888888888' //也不是响应式

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

### setup 的返回值

setup(){

  return ()=> '你好啊！'

}

该组件在渲染时只会输出字符串 '你好啊！'。它展示了 Vue 3 中通过 setup 函数返回渲染函数的一种用法

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'    //name也不是响应式
      let age = 18    //此时age不是响应式
      let tel = '13888888888' //也不是响应式

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return ()=> '你好啊！'
    }
  }
</script>

======================================================================

setup data methods可以同时存在

但是data可以用this 但是setup里面的数据不能用this

就是data可以用this抢走setup变量的数据比如 data c:this.name

但是setup的数据不能用data里面的数据 也不能用this

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
    <h2>{{a}}</h2>
    <h2>{{c}}</h2>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    data(){
      return{
        a:100,
        c:this.name //data可以用this然后抢走setup里面的数据

    }
  },
    methods:{},
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'    //name也不是响应式
      let age = 18    //此时age不是响应式
      let tel = '13888888888' 

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

======================================================================

Setup语法糖

<script setup> 标签: 这个标签是 Vue 3 的一种特殊语法糖，它自动将你在其中定义的变量、函数、导入等内容作为 setup 函数的内容，不需要显式地写 setup() 函数。

<script setup lang="ts">

然后如何在setup响应式

响应式指的是数据和视图之间的双向绑定关系。当数据发生变化时，视图会自动更新；当视图触发事件影响数据时，数据也会相应改变。这种机制使得数据和视图保持同步

import {ref} from 'vue'

  let name = ref('张三')

  let age = ref(18)

  function changName(){

    name = '李四'//注意：此时这么修改name页面是不变化的

  }

  function changAge(){

    console.log(age)

    age += 1

  }   

要变成

  function changName(){

    name.value = '李四'

  }

  function changAge(){

    console.log(age)

    age.value += 1

  }

意思就是

①添加ref

②把下面的变量添加.value

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 数据：name 和 age 是响应式数据
let name = ref('张三')
let age = ref(18)
let tel = '13888888888'

// 方法
function changeName() {
  name.value = '李四' // 修改 name 页面会响应变化
}

function changeAge() {
  age.value += 1 // 修改 age 页面会响应变化
}

function showTel() {
  alert(tel) // 显示电话
}
</script>

======================================================================

reactive 创建：对象类型的响应式数据

就是字典{}

①把上面的改成{{car.brand}}  {{car.price}}

②数据改为下面的改成let car = reactive({brand:'',price:''})

③fuction方法就不用.value了直接用car.price或者car.brand

v-for

:key="item.id":

• key 属性用于唯一标识每个列表项，帮助 Vue 优化渲染和更新性能。
• item.id 是列表项的唯一标识符。确保 key 是唯一的，通常使用数据的唯一标识符，如 id。

<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

======================================================================

ref 创建：对象类型的响应式数据

- 其实`ref`接收的数据可以是：**基本类型**、**对象类型**。

- 若`ref`接收的是对象类型，内部其实也是调用了`reactive`函数。

如果用ref必须.value.price

<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>

======================================================================

 1. `ref`用来定义：**基本类型数据**、**对象类型数据**；

 2. `reactive`用来定义：**对象类型数据**。

当你使用 reactive 创建一个响应式对象时，Vue 会追踪这个对象内部的所有属性的变化。如果你直接给这个响应式对象重新分配一个新对象引用，那么 Vue 将不再追踪这个新对象的变化。

import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 25,
});

// 直接重新分配一个新对象
state = { name: '李四', age: 30 };  // 这将导致响应性丢失

Object.assign(state, { name: '李四', age: 30 });  // 保持响应性

或者

state.name = '李四';
state.age = 30;

======================================================================

【toRefs 与 toRef】

  // 数据

  let person = reactive({name:'张三', age:18, gender:'男'})

  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力

  let {name,gender} =  toRefs(person)

  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力

  let age = toRef(person,'age')

<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup>
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

======================================================================

computed

v-model 是 Vue.js 中的一个指令，用于在表单元素（如输入框、复选框、单选按钮等）和数据之间创建双向绑定。它使得表单元素的值与数据模型保持同步，既可以自动更新数据模型的值，也可以在模型变化时更新表单元素的值。

const example = computed(() => {return someValue; });

• get 方法（读取计算属性的值）：

  • get 方法用于定义计算属性的读取逻辑。当你访问这个计算属性时，get 方法会被调用，并返回计算后的值。

• set 方法（修改计算属性的值）：

  • set 方法用于定义计算属性的写入逻辑。当你对这个计算属性进行赋值操作时，set 方法会被调用。
  • 你可以在 set 方法中实现如何根据计算属性的值来更新其他的响应式数据。

val可以修改成其他变量名

意思就是点击按钮后，就会执行方法function, 变成li-si名字后传入set的val中分割，然后给firstname为li 同理 然后在传入get进行输出返回

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性——只读取，不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>

======================================================================

【watch】

- 特点：`Vue3`中的`watch`只能监视以下**四种数据**：

> 1. `ref`定义的数据。

> 2. `reactive`定义的数据。

> 3. 函数返回一个值（`getter`函数）。

> 4. 一个包含上述内容的数组。

const 声明的变量是不可变的，即它们的值不能被重新赋值。

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

======================================================================