vue3更多的是使用解构赋值去实现原来的watch computed data(使用steup) 以及生命周期 下面我使用了平时用的可能比较多的属性
vue2更多的是在vue({el:""})去挂载
vue3是通过Vue.createApp去加载对应的属性然后使用mount挂载多对应元素上
这次主要是针对vue3种的composition api 进行了尝试使用 可以将一部分逻辑代码整合到一起这真的很不错
因为我平时用的是apicloud所以更多的是在html种直接使用而并非cli中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="hello-vue" v-cloak class="demo">
<div @click="name = '1aa'">
当前页面name： {{name}}
</div>
<div @click="name1 = '1aa'">
当前页面name1： {{name1}}
</div>
<br />
当前页面refDome： {{refDome}}
<br />
当前页面computedDome： {{computedDome}}
<br />
当前页面reactiveDome： {{reactiveDome}}
<br />
<div @click="readonlyDome = 'refDomeChange'">
当前页面readonlyDome： {{readonlyDome}}
</div>
<br />
-----
<br />
dome组件： <dome :refdome="refDome"></dome>
<div @click="refDome += 'refDomeChange'" class="">修改refDome</div>
<div @click="count ++ " class="">count</div>
</div>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
var mixin = {
data: function () {
return {
name: "name"
}
},
created: function () {
console.log('mixinsCreated')
},
methods: {
mixinHandle() {
console.log('mixinHandle')
}
}
}
var { ref, toRef, toRefs, reactive, readonly, onBeforeMount, onMounted, watch, computed, watchEffect, getCurrentInstance } = Vue
var HelloVueApp = {
mixins: [mixin],
methods: {
HelloVueAppHandle() {
console.log('HelloVueAppHandle')
}
},
data: function () {
return {
name1: "namebbb"
}
},
setup(props) {
const { ctx } = getCurrentInstance()
// ctx 和 this一样
const refDome = ref('refDome')
const reactiveDome = reactive({
dome: 'reactiveDome'
})
const count = ref(0)
const readonlyDome = readonly(11)
const domeHandle = () => {
console.log('domeHandle')
}
const computedDome = computed(() => refDome.value + reactiveDome.dome)
watchEffect((ret) => {
console.log(count.value)
console.log(refDome.value)
})
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
onBeforeMount(
function () {
console.log("onBeforeMount")
}
)
onMounted(function () {
console.log("onMounted")
// mixinHandle()
})
watch(count, (newValue, oldValue) => {
console.log('count', newValue)
})
watch(refDome, (newValue, oldValue) => {
console.log('refDome', newValue)
}, { deep: true })
watch(reactiveDome, (newValue, oldValue) => {
console.log('reactiveDome', newValue)
})
watch(readonlyDome, (newValue, oldValue) => {
console.log('readonlyDome', newValue)
})
return {
refDome,
reactiveDome,
readonlyDome,
computedDome,
count
}
},
}
var app = Vue.createApp(HelloVueApp)
app.component('dome', {
template: `
<div>{{toRefDome}}</div>
<div>{{refDome}}</div>
`,
props: ['refdome'],
setup(props) {
console.log(props)
const toRefDome = toRef(props, 'refdome')
const refDome = ref(props)
console.log(toRefDome)
console.log(toRefDome.value)
return {
toRefDome,
refDome
}
}
})
var vm = app.mount('#hello-vue')
console.log(vm)
console.log(vm.name)
vm.name = 'app对象外修改'
console.log(vm.refDome)
vm.refDome = 'app对象外修改refDome'
vm.reactiveDome.dome = 'app对象外修改reactiveDome'
// vm.reactiveDome = 'app对象外修改reactiveDome' 如果直接修改reactive创建的对象就监听watch就监听不到了
vm.readonlyDome = 'app对象外修改readonlyDome'
vm.mixinHandle()
vm.HelloVueAppHandle()
</script>
</body>
</html>
