Vue3.x快速上手（一）Vue3.x的主要函数

2021-11-05 11:34:04 阅读：178 来源： 互联网

标签：createApp 函数 title 快速 app let Vue3 const ref

创建Vue3.x框架Demo

<script src="https://unpkg.com/vue@next"></script>
<body>
  <div id="app">
    {{title}}
  </div>
  <script>
    const {createApp} = Vue
    const app= createApp({
      data(){
        return {
          title:123
        }
      }
    })
    let vm = app.mount('#app')
  </script>
</body>

原来的data()函数还是可以用的，有双向绑定

Setup函数

Vue3.x的一大新特性就是引入了setup函数，除了默认延续了Vue2.x的已有开发方式以外，Vue3.x可以在createApp时传入一个setup函数，该函数会在组件创建前并且props属性绑定完成时执行，所以在其内部的this上下文对象还没有指向Vue对象的实例。setup中存在两个参数props和content，可以在props中获取组件外传入的参数，可以在content中使用组件的内置对象。

<div id="app">
    {{title}}
  </div>
  <script>
    const {createApp} = Vue
    const app= createApp({
      setup(props,content){
        console.log(this)//this指向window
        let title = 'setUp数据'
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
  </script>

setUp中获取不到vm中的数据

Reactive函数

reactive是Vue3.x提供的对象实例外部的响应式数据对象，配合实现双向绑定的

<div id="app">
    <input type="text" v-model='userInfo.username'>
    <input type="text" v-model='userInfo.password'>
    <br>
    {{userInfo}}
  </div>
  <script>
    const {createApp,reactive} = Vue
    const app= createApp({
      setup(){
        let userInfo = reactive({
          username:'账号',
          password:'密码'
        })
        return {
          userInfo
        }
      }
    })
    let vm = app.mount('#app')
  </script>

Ref函数

在setup中虽然可以使用reactive实现响应式的数据定义，但是声明多个会造成数据的不必要嵌套，此时可以使用ref来进行数据的创建，ref会将嵌套的基本类型数据返回成只有value属性的对象，并将其值挂载到组件的实例上。

<div id="app">
    {{title}}
  </div>
  <script>
    const {createApp,reactive,ref} = Vue
    const app= createApp({
      setup(){
        let title = ref('ref数据')
        console.log('setUp中的title',title)
        // ref会将嵌套的基本类型数据返回成只有value属性的对象，并将其值挂载到组件的实例上。
        setTimeout(() => {
          // 在setup中更改ref中的值需要更改value属性
          title.value = '我是setup中更改的数据'
        }, 3000);
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
    console.log('vm',vm)

和ref不同的是,reactive在setUp函数内外都可以通过vue对象来改变数据.

toRef函数

<div id="app">
    <input type="text" v-model='userInfo.username'><br>
    <input type="text" v-model='userInfo.password'><br>
    <input type="text" v-model='username'><br>
    <input type="text" v-model='password'><br>
    {{userInfo}}<br>
    {{username}}{{password}}
  </div>
  <script>
    const {createApp,reactive,toRef} = Vue
    const app= createApp({
      setup(){
        let userInfo = reactive({
          username:'账号',
          password:'密码'
        })
        let username = toRef(userInfo,'username')
        let password = toRef(userInfo,'password')
        return {
          userInfo,username,password
        }
      }
    })
    let vm = app.mount('#app')

toRef的作用是将reactive创建的对象中的属性，转换成ref属性，并且建立绑定

unref函数

<div id="app">
    {{title}}<br>{{untitle}}
  </div>
  <script>
    const {createApp,reactive,ref,unref} = Vue
    const app= createApp({
      setup(){
        let title = ref('ref值')
        console.log('title',title)
        let untitle = unref(title)
        console.log('untitle',untitle)
        return {
          title,untitle
        }
      }
    })
    let vm = app.mount('#app')
  </script>

unref可以包裹一个ref对象，并将其value返回，但是和原来值没了绑定关系，有点像浅拷贝，只拷贝值。

watch函数

 <div id="app">
    <input type="range" min="0" max="100" step="1" v-model='value1'>
    <br>
    <input type="range" min="0" max="100" step="1" v-model='value2'>
  </div>
  <script>
    const {createApp,reactive,ref,watch} = Vue
    const app= createApp({
      setup(){
        let value1 = ref(0)
        let value2 = ref(0)
        watch([value1,value2],([n1,n2],[v1,v2])=>{
          console.log('value1变化的值',n1)
          console.log('value1的原值',v1)
          console.log('value2变化的值',n2)
          console.log('value2的原值',n2)
        })
        return {
          value1,value2
        }
      }
    })
    let vm = app.mount('#app')
  </script>

watchEffect函数

 <div id="app">
    <input type="text" v-model='title'>
    </div>
  <script>
    const {createApp,reactive,ref,watch,watchEffect} = Vue
    const app= createApp({
      setup(){
        let title = ref('字符串')
        watchEffect(()=>{
          console.log('自动执行watchEffect')
        })
        watchEffect(()=>{
          console.log('字符串的变化',title.value)
        })
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
  </script>

没有值变化的时候，watchEffect只运行一次，当有响应属性的值发生变化的时候，会自动执行

computed函数

<div id="app">
    <input type="number" v-model='num'>
    <br>
    计算属性的结果：{{getNum}}<br>
    函数运算的结果：{{getNum1()}}<br>
    <input type="text" v-model='str'>
    </div>
  <script>
    const {createApp,reactive,ref,computed} = Vue
    const app= createApp({
      setup(){
        let num = ref(0)
        let str = ref('普通字符串')
        let getNum = computed(()=>{
          console.log('计算属性执行一次')
          return num.value + '元'
        })
        let getNum1 = ()=>{
          console.log('函数运行一次')
          return num.value + '元'
        }
        return {
          num,getNum,getNum1,str
        }
      }
    })
    let vm = app.mount('#app')
  </script>

computed运算只在追踪内部依赖的发生变化的时候执行，函数计算只要视图更新就会跟着计算

标签：createApp,函数,title,快速,app,let,Vue3,const,ref
来源： https://blog.csdn.net/qq_33070437/article/details/121137894

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

ICode9