vue3.2入门

vue3.2 版本开始可以使用语法糖！对于从2.0过来的人我就直接看3.2的语法了

helloworld.vue

<!-- 
setup语法糖
vue3.0的变量需要return出来才可以在template中使用, 写法冗余

vue3.2 在script标签中添加setup解决问题
组件只需要引入,不需要注册,属性方法不需要返回,不需要写setup函数,不需要写export default -->
<script setup lang="ts">
import { ref ,reactive,computed,watch,onMounted} from 'vue'
//接收组件参数 方法一
defineProps<{ msg: string }>()
// 基础类型数据推荐适用ref函数，引用类型数据推荐适用reactive函数
const count = ref(0)
const job2 = ref({
  name:"张三",
  type: '前端工程师',
  salary: '20K'
})
const job = reactive({
    name:"张三",
    type: '前端工程师',
    salary: '20K',
    msg:{
      height:'180cm',
      weight:"70kg"
    }

})

const watchString = ref('测试watch的字符串')

/*************************ref定义基本数据类型****************/ 
// 普通方法
function addcount(){
  count.value++
  console.log(count)
}
// es6方法
const setcount = () => {
  count.value--
}
/************************reactive 定义引用数据类型**********/ 
const reffun=()=>{
  job2.value.type="Java工程师"
}
const reactivefun=()=>{
  job.type="php工程师"
}
/*************************computed计算属性*****************/  
const nameString = computed(() => {
    return '我的name是' + job.name
})
/*************************watch使用************************/  
//监听基本数据类型 ref
watch(count,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal, oldVal);
    watchString.value='新：'+newVal+"----旧："+oldVal
})
//监听引用数据类型 reactive
watch(()=>job.type,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal, oldVal);
    watchString.value='新：'+newVal+"----旧："+oldVal
})
//监听引用数据类型 reactive多数据源[深度监听]
watch(()=>job.msg.height,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal, oldVal);
    watchString.value='新：'+newVal+"----旧："+oldVal
}, {deep:true})
const changeheight=()=>{
  job.msg.height="190cm"
}
/*************************生命周期************************/ 
onMounted(()=>{
  console.log("和vue2一样，生命周期名称前面加个on，没有beforeCreate和created")
})
//setup里 直接调用相当于以前的 beforeCreate和created
addcount()
/***********************over********************************/ 
</script>

<template>
  <h1>{{ msg }}</h1>
  <h2>{{count}}</h2>
  <button @click="addcount">+</button>
  <button @click="setcount">-</button>
  <p>
    {{ job.salary }}--{{ job.type }}
    <button @click="reffun">ref 无效</button>
    <button @click="reactivefun">reactive 有效</button>
  </p>
  <p>{{ nameString }}</p>
  <button @click="changeheight">深度监听</button>
  <p>{{watchString}}</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

mychild.vue

<!-- 进阶组件传参 -->
<script setup lang="ts">
import { ref ,reactive,toRefs,defineEmits } from 'vue'
//接收组件参数 方法二  
const props = defineProps({
    msg: {
      type: String,
      default: '11'
    },
    job:{
        type:Object
    }
}) 
const emit = defineEmits(['changmsg'])
const changefather=()=>{
    console.log("哈哈")
    emit('changmsg',"哈哈");
}
const flag = ref(true) 
// defineExpose({flag}) //基础类型数据暴露ref内容

// 获取子组件ref变量和defineExpose暴露
const info = reactive({
    name:"woods",
    type: '高级前端工程师',
    salary: '30K',
   
})
//定义引用数据类型 暴露内容
defineExpose({
  ...toRefs(info),
  flag,
  changefather
})

</script>

<template>
  <h4 v-if="flag">{{ msg }}{{ job }} </h4>
    <h4>mychild组件自己的变量:{{info.name  }}</h4>
 <button @click="changefather">changefather</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

　app.vue

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import MyChild from "./components/MyChild.vue"
import {ref,reactive } from "vue"
const msg=ref("父组件变量")
const job = reactive({
    name:"张三",
    type: '前端工程师',
    salary: '20K',
})
const changmsgfather=(val:String)=>{
  console.log(666)
  msg.value="我是被子组件修改的。还传了个参数:"+val
}
const mychild=ref()
const changeref=()=>{
  mychild.value.flag=!mychild.value.flag //子组件变量
  mychild.value.name="hahaha!" //不要写成 mychild.value.info，在子组件已经解构了
  mychild.value.changefather()  //子组件方法
}
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <!-- 3.2直接引入组件，无需注册 -->
  <HelloWorld msg="Vite + Vue" />
  <!--  -->
  <h2>{{ msg }}</h2>
  <MyChild :msg="msg" :job="job" @changmsg="changmsgfather" ref="mychild" ></MyChild>
  <div>
    <button @click="changeref">使用ref修改</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>