【Vue3】0-99

1. 搭建项目

cli搭建 需cli版本 4.5.0以上 
vue create <项目名称>

vite搭建 
npm init vite-app <项目名称>
cd 项目名
npm install(or 'yarn')
npm run dev (or 'yarn dev')

2.setup函数

.set up触发早于 beforeCreate生命周期

//此例子未考虑响应式
<template>
  <h1>11</h1>
  <h2>{{name}}</h2>
 <button @click="sayhello">sayhello</button>
  <button @click="aaa">aaa</button>
</template>

<script>

 import {h} from 'vue' //进行组件渲染引用
export default {
 
  name: 'App',
  setup(){
    let name = '11111111'  //声明变量
    function sayhello(){ //声明普通函数
      alert(name)
    }
    const aaa = res=>{ //声明箭头函数
      alert(name)
    }
    return{  //必须要return出去才能使用
      name,
      sayhello,
      aaa
    }
    // return ()=> h('h3','111122223')
  }
}
</script>

 setup(props,context) {
	console.log(props)
	console.log(context.attrs)
	console.log(context.emit)
	console.log(context.slots)
}

1.props:[]  //接受父组件传参
	也可在setup函数中 使用 context.attrs接收 相当于V2中的$attrs
2.emit:[] 声明父组件传过来的方法 不做声明或接收 会在控制栏报异常
	也可在setup函数中 使用  context.emit
3.slots相当于v2中的slots

例子
子组件

父组件

3.ref函数 作用-定义响应式数据

• ref函数不影响ref属性的使用

<template>
  <h1>11</h1>
  <h2>{{name}}</h2> <!--渲染时无需再写.value-->
  <h2>{{age}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.salary}}</h2>
  <button @click="changeInfo">修改信息</button>
</template>
<script>
import {ref} from 'vue' 
export default {
  name: 'App',
  setup(){
    let name =ref('11111111')  //创造一个引用实现对象 RefImpl
    let age = ref(222)
    let job = ref({ //声明对象 创造一个proxy对象 求助了v3中的reactive函数
      type:'97984',
      salary:'200000'
    })
    let changeInfo = res=>{
      name.value = '3333333333333'
      age.value = age.value + 1
       job.value.type='wfgagagwawag'
      job.value.salary='1767ghbjifuyiug'  
    }
    return{
      name,
      age,
      job，
      changeInfo
    }
  }
}
</script>

4.reactive函数

• 无法处理基本数据类型
• reactive函数声明对象 可直接在对象内添加新属性

<template>
  <h1>{{job.type}}</h1>
  <h1>{{job.salary}}</h1>
  <h1>{{job.a.b.c.d}}</h1>
   <h1>{{hbby}}</h1>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
// reactive 内部基于es6的 Proxy
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    let job = reactive({ //处理对象是深层次的
      type: "前端工程师",
      salary: "30k",
      a:{
        b:{
          c:{
            d:666
          }
      },
      },
    });
    // let 代理对象 = 源对象 实现响应式
     let hbby =reactive(['抽烟','喝酒','烫头'])
    let changeInfo = (res) => {
      // job.type= 'ui'
      //  job.salary= '60k'
      //  job.a.b.c.d=999     //如果前面写了响应式的操作 会影响到下面的
       hbby[0] = '打打'     //原则上这里不会进行响应式 页面不会更新 vue3 可以直接用索引修改
    };
    return {
      job,
      hbby,
      changeInfo,
    };
  },
};
</script>

5.模拟V3响应式原理

p.name='李四'   //调用set
delete p.name //调用 delete 

6.computed计算属性 包括V2用法

<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <span>全名：{{ person.fullName }}</span>
  全名：<input type="text" v-model="person.fullName" />
</template>
<script>
import { reactive, computed } from "vue";
export default {
  name: "demo",
  //   computed:{ // v2写法
  //     fullName(){
  //         return this.person.firstName + '-' + this.person.lastName
  //     }
  //   },
  setup(props, context) {
    console.log("---setup---", props, context);
    let person = reactive({
      firstName: "章三",
      lastName: 18,
    });
    //
    //v3写法
    //没有考虑计算属性被修改的情况下
    // person.fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });
    //考虑读和写的完整写法
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });
    return {
      person,
    };
  },
};
</script>
<style scoped lang="less">
</style>

7.watch监听属性 包括V2用法

<template>
  <h2>当前求和为{{ sum }}</h2>
  <button @click="sum++">+++++++</button>
  <h2>当前为{{ msg }}</h2>
  <button @click="msg += '!'">-----</button>
  <br>
  <h2>当前为{{ person.name }}</h2>
  <h2>当前为{{ person.age }}</h2>
  <h2>当前为{{ person.job.j1.salary }}</h2>
  <button @click="person.name += '!'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">增长薪资</button>
</template>
<script>
import { reactive, computed, ref, watch } from "vue";
export default {
  name: "demo",
  // watch:{//v2写法
  // sum(newVlue,oldVlue){//简易写法
  //   console.log('sum变化了')
  // },
  // sum:{//完整写法 可以配置属性
  //   immediate:true,//是否立即监听
  //   deep:true,//深度监听 （多层的）
  //   handler(newVlue,oldVlue){
  //     console.log('sum变化了',newVlue,oldVlue)
  //   }
  // }
  // },
  setup(props, context) {
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      age:18,
      name:'王五',
      job:{
        j1:{
          salary:20
        }
      }
    })
     //v3写法 需要先引入
    /*
    当监听的是ref直接声明的单个属性时 无需开启deep深度监听
    当监听的是reactive声明的obj被监听时 开启deep配置是无效的
    当监听的是reactive声明的obj里的obj时 开启配置是有效的
    */
    //
    // 情况一监视ref定义的一个响应式数据
    // watch(sum, (newVlue, oldVlue) => {
    //   console.log("sum变化了", newVlue, oldVlue);
    // });

    // 情况二监视ref定义的多个响应式数据
    // watch([sum,msg], (newVlue, oldVlue) => {
    // newVlue,oldVlue 也是数组形式的旧数据新数据
    //   console.log("变化了", newVlue, oldVlue);
    // },{
    //   immediate:true
    // });

    /* 情况三监视reactive定义的一个响应式数据 
      此处无法正确活动oldVlue
      强制开启了deep深度监视 deep配置无效
    */
    // watch(person, (newVlue, oldVlue) => {
    //   console.log("变化了", newVlue, oldVlue);
    // },{
    //   immediate:true
    // });

    /*情况四监视reactive定义的一个响应式数据中的某一个属性 */
    //  watch(()=>person.age, (newVlue, oldVlue) => {
    //     console.log("变化了", newVlue, oldVlue);
    //   },{
    //     immediate:true
    //   });

    /*情况五监视reactive定义的一个响应式数据中的多个属性 */
    //  watch([()=>person.age,()=>person.name], (newVlue, oldVlue) => {
    //     console.log("变化了", newVlue, oldVlue);
    //   },{
    //     immediate:true
    //   });

    /*情况六监视reactive定义的一个响应式数据中的obj的某个属性 此时可以配置deep */
    //  watch(()=>person.job, (newVlue, oldVlue) => {
    //     console.log("变化了", newVlue, oldVlue);
    //   },{
    //     immediate:true,
    //     deep:true
    //   });
    return {
      sum,
      msg,
      person
    };
  },
};
</script>
<style scoped lang="less">
</style>

// let person = ref({
    //   age:18,
    //   name:'王五',
    //   job:{
    //     j1:{
    //       salary:20
    //     }
    //   }
    // })
    //监听ref声明的obj类型数据的实现方法
    // watch(person.value,(newVlue,oldVlue)=>{ 
    //   console.log('sum',newVlue,oldVlue)
    // })
    // watch(person,(newVlue,oldVlue)=>{
    //   console.log('sum',newVlue,oldVlue)
    // },{deep:true})