vue3的setUp语法

2022-08-17 17:33:25 阅读：147 来源： 互联网

标签：const title setUp value 语法 reactive vue3 console ref

<!--vue setupApi 语法演示-->
<template>
 <view class="content">
  <image class="logo" src="/static/logo.png"></image>
  <view class="text-area">
   <view class="title">{{data.title}} <button type="default" @click="setDataTitle()">改变reactive定义的title</button> </view>
   <view>{{title}}  <button type="default" @click="setTitle()">改变ref定义的title</button> </view>
   <view>{{num}}</view>

   <dome :title='title' v-model="state.name" v-model:age="state.age" @change='change'></dome>

   <button type="default" @click="setColor()">改变ref定义的color</button>
   <button @click="popShow">111111</button>
      <u-popup v-model="state.show">
        <view>出淤泥而不染，濯清涟而不妖{{state.show}}</view>
      </u-popup>
      <u-input v-model="formData.value" :type="formData.type" :border="formData.border" />
<!--      <u-button @click="show = true">打开</u-button>-->
  </view>
 </view>
</template>

<script setup>
 import {reactive,ref,computed,watch,defineComponent,watchEffect,defineProps ,defineEmits } from 'vue' //按需引入vueApi
 import {onReachBottom,onShow,onLoad,} from '@dcloudio/uni-app'//按需引入uni-appApi
 import dome from '@/components/dome/dome.vue'
 import { useStore } from 'vuex'
 const store = useStore()
 // defineComponent({
 //   components: {
 //    dome
 //   }
 // })
 onl oad((option)=>{
  console.log(11111111111,'onLoad')
 })
 onShow(() => {
      console.log(11111111111,'onShow')
  // 业务逻辑
 })
  const formData = reactive({
    value: '',
    type: 'text',
    border: true
  })
   const state = reactive({
        name: 'Jerry',
        age: 20,
        show:false
   })
  const show = ref(false)
  //打开uni弹出框
  const popShow = (()=>{
    state.show = true
    show.value = true
  })
 //reactive 用来定义数组和对象
 const data = reactive({
        title:999,
 });
 //定义颜色
 const color = ref('red');
 //修改reactive定义的值
 const setDataTitle = (()=>{
  data.title = 1111
 })
 //修改ref定义的值
 const setTitle = (()=>{
  title.value = 1111
 })
 //ref定义的数据：在js中操作数据需要.value，template模板中读取数据不需要.value：
 const title = ref(999);
  let setColor = (()=>{
    color.value = color.value=='blue'?'red':'blue'
  })
 // 计算属性-简写
 const num = computed(()=>{
  return title.value+data.title
 })
 // watch属性 监听ref 监听多个[1,2]   
  watch(title, (newValue, oldValue) => { 
      console.log('v1====', newValue, oldValue)
    }, {immediate:true},
 )
 //watch 属性 监听reactive  监听单个() =>data.title  监听数组 ()=>[...list] 监听vuex()=>store.state.count
  watch(data, (newValue, oldValue) => {
  console.log('v1====', newValue, oldValue);
  })
 // watch的套路是：既要指明监视的属性，也要指明监视的回调。
 // watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
   watchEffect(() => {
      console.log(data.title)
      console.log(title)
  })
  //子组件触发的方法
    let change = (()=>{
  console.log( store.state.id,'this.$store.state');
     data.title = '子组件点击'
 })
 // change((value)=>{
 //   console.log(value)
</script>

<style scoped>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }

 .logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
 }

 .text-area {
  /* display: flex; */
  justify-content: center;
 }

 .title {
  font-size: 36rpx;
  color: v-bind(color);
 }
</style>

标签：const,title,setUp,value,语法,reactive,vue3,console,ref
来源： https://www.cnblogs.com/webzyf/p/16596005.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3的setUp语法