vue3.X简单使用

vue3.X

信息源:Wscats/vue-cli

脚手架搭建

npm install -g @vue/cli
vue create katsuki-test  //进入配置选择,选3版本

根据选择的管理包运行
yarn serve
npm run serve

setup(props, ctx)

setup对应生命周期beforeCreatecreated

接受的参数
props:获取父组件等传入值或函数
ctx包含的一些属性:

  • root
  • parent
  • refs
  • attrs
  • listeners
  • isServer
  • ssrContext
  • emit

setup做什么?
1.创建响应式数据:refreactive,非响应式,相当于state
2.定义函数
3.引入的方式调用生命周期
4.return响应数据和函数,template能调用

生命周期

setup取缔了2.0beforeCreatecreated生命周期

Vue2.0Vue3.0
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured

新增了onRenderTrackedonRenderTriggered

使用案例

案例一:ref

<template>
  <div>
	<button @click="onChange">{{ name }} age: {{ age }}</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
  	// 第一个参数接收props
  	setup() {
  		// 响应式数据
		let name = ref('katsuki')
		let age = ref(17)
		// 函数
		const onChange = () => age.value ++
		//必须返回 模板中才能使用
		return {
			name,
			age,
			onChange
		}
	} 
  }
</script>

案例二:emit、state

<template>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">假登录</button>
    <p>Values: {{ lowerCaseUserName + ' ' + password }}</p>
</template>
<script>
  // 引入需要使用的生命周期
  import { reactive, computed, onMounted, toRefs } from 'vue'
  export default {
  	emits: {
    	// 对应名称接收消息
    	login: obj => {
      		console.log('obj', obj)
      		return true
    	}
  	},
  	// 第二个参数接收emit
  	setup(props, { emit }) {
  		// 响应数据集合state
		const state = reactive({
	      username: '',
	      password: '',
	      lowerCaseUserName: computed(() => state.username.toLowerCase()),
	    })
	    
	    // 发送消息
	    const login = () => {
	      emit('login', {
	        username: state.username,
	        password: state.password,
	      })
	    }
		
		onMounted(() => {
	      console.log('onMounted')
	    })
	    
	    return {
	      ...toRefs(state), // 解构转换为响应式框架
	      login,
	    }
	} 
  }
</script>

案例三:watch

Watch.vue
<template>
  <div>
    <div class="input_warp">
      <input type="text" v-model="inputValue" />
    </div>
    <div class="input_warp">
      <input type="text" v-model="inputValue2" />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  setup() {
    const state = reactive({
      inputValue: '',
      inputValue2: '',
    })
    // 监听单个值
    watch(() => state.inputValue, (newinputValue, oldinputValue) => {
      console.log('newinputValue', newinputValue)
      console.log('oldinputValue', oldinputValue)
    })
    // 监听多个值
    watch(
      () => [state.inputValue, state.inputValue2],
      ([newinputValue, newinputValue2], [oldinputValue, oldinputValue2]) => {
        console.log('newinputValue', newinputValue)
        console.log('newinputValue2', newinputValue2)
        console.log('oldinputValue', oldinputValue)
        console.log('oldinputValue2', oldinputValue2)
      }
    )
    return {
      ...toRefs(state),
    }
  },
}
</script>

<style lang="less">
.input_warp {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: pink;
}
</style>

案例四:vuex

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    inputValue: '',
    inputValue2: '',
  },
  getters: {
    getInputValue(state) {
      return state.inputValue
    },
    getInputValue2(state) {
      return state.inputValue2
    },
  },
  mutations: {
    setInputValue(state, value) {
      state.inputValue = value
    },
    setInputValue2(state, value) {
      state.inputValue2 = value
    },
  },
  actions: {},
  modules: {},
})

main.js添加引入

import store from './store'
createApp(App)
  .use(store)

Watch.vue

<template>
  <div>
    <div class="input_warp">
      <input type="text" v-model="inputValue" />
    </div>
    <div class="input_warp">
      <input type="text" v-model="inputValue2" />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
  	const store = useStore()
    const state = reactive({
      inputValue: '',
      inputValue2: '',
    })
    watch(
      () => [state.inputValue, state.inputValue2],
      ([newinputValue, newinputValue2], [oldinputValue, oldinputValue2]) => {
      	// 奖数据存入store
        store.commit('setInputValue', newinputValue)
        store.commit('setInputValue2', newinputValue2)
        // 开启了eslint则必须调用
        console.log('oldinputValue', oldinputValue)
        console.log('oldinputValue2', oldinputValue2)
      }
    )
    return {
      ...toRefs(state),
    }
  },
}
</script>

<style lang="less">
.input_warp {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: pink;
}
</style>

Panel.vue

<template>
  <div class="about">
    <Watch />
    <h3>inputValue:<span v-text="inputValue"></span></h3>
    <h3>inputValue2:<span v-text="inputValue2"></span></h3>
  </div>
</template>

<script>
import Watch from '../components/Watch'
import { reactive, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    Watch,
  },
  setup() {
    const store = useStore()
    // 获取store的值,赋值到当前state中
    const state = reactive({
      inputValue: computed(() => {
        return store.getters.getInputValue
      }),
      inputValue2: computed(() => {
        return store.getters.getInputValue2
      }),
    })
    return {
      ...toRefs(state),
    }
  },
}
</script>

案例五:provide、inject

Father.vue

<template>
  <div>
  	FatherPage
    <Son />
  </div>
</template>

<script>
import Son from '../components/son'
import { provide, reactive } from 'vue'
export default {
  components: {
    Son,
  },
  setup() {
    const state = reactive({
      name: 'katsuki',
      arr: ['ォラォラォラォラ', '無駄無駄無駄', '貧弱貧弱貧弱', 'wryyyyyy', 'だが断る']
    })
	// 在父组件及其子组件中可获取
    provide('katsuki', state.name)
    provide('arr', state.arr)
  },
}
</script>

Son.vue

<template>
  <div>SonPage</div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const katsuki = inject('katsuki')
    console.log('katsuki', katsuki)
    const arr = inject('arr')
    console.log('arr', arr)
  },
}
</script>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页