vue3.0 Composition API 中 setup 使用

介绍

setup 简单来说就像 react 一样，你的数据定义不用放到 data, 方法不用放到 methods, 只需要一个 setup 全部搞定，不用像有些复杂的项目，接口一堆，写一会忘了上面定义的变量参数，可以一块一块来写，结合jsx 更加方便，写起来很舒服

使用

import { defineComponent, ref, reactive } from "vue";

export const VisualEditor = defineComponent({
    props: {},
    setup (props) {
                const readersNumber = ref(0)
                const book = reactive({ title: 'Vue 3 Guide' })
                const readerHtml = () => {
            <span class="text">
               hello world
            </span>
        }
        return {
                    readersNumber,
                    book,
                    readerHtml
                }
    }
})

vue监听属性 watch

vue 监听属性 watch 有三种用法

watch 用法

普通用法

<input type="text" v-model="userName"/>

new Vue({
  el: '#box',
  data: {
    userName: '中国'
  },
  watch: {
    userName(newName, oldName) {
      // ...
    }
  }
})

vue 监听处理函数，当每次监听到 userName 值发生改变时，执行函数。

 watch: {
   userName(newName, oldName) {
     // ...
   }
 }

deep 用法

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<input type="text" v-model="userName"/>

new Vue({
  el: '#box',
  data: {
    userName: {
            name: '张三',
            age: 18
        }
  },
  watch: {
    userName: {
                handler(newName, oldName) {
                    // ...
                },
                deep: true,
                immediate: true
            }
        }
  }
})

设置deep: true 则可以监听到 userName.name 的变化，此时会给 userName 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
    'userName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

immediate 属性

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  }
})

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

vue 中显示隐藏问题

vue  使用当用 遇到一个 temple 模板里面的坑，就是 v-if  和 v-show 不显示的问题，需要在标签中加入 style="display:black"

vue 中组建之间的传参问题

1.父向子组件传参

App.vue为父，引入componetA组件之后，则可以在App.vue中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componentA对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。

而子组件componetA中，声明props参数’msgfromfa’之后，就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

App.vue中

<component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>

import componentA from './components/componentA'
export default {
    new Vue({
        components: {
          componentA
        }
    })
}

<p>{{ msgfromfa }}</p>

export default {
    props: ['msgfromfa']
}

<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>

import componentA from './components/componentA'
export default {
    new Vue({
        data: function () {
            return {
              childWords: ""
            }
        },
        components: {
          componentA
        },
        methods: {
            listenToMyBoy: function (msg){
              this.childWords = msg
            }
        }
    })
}

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'
export default {
    data: function () {
        return {
          msg: 'I like you!'
        }
    },
    methods: {
      onClickMe: function(){
        this.$emit('child-say',this.msg);
      }
    }
}

<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)"></component-a>

import componentA from './components/componentA'
export default {
    new Vue({
        events: {
            'child-say' : function(msg){
              this.childWords = msg
            }
        }
    })
}

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'
export default {
    data: function () {
        return {
          msg: 'I like you!'
        }
    },
    methods: {
      onClickMe: function(){
        this.$dispatch('child-say',this.msg);
      }
    }
}

vue 中 axios 请求

axios 请求的坑：请求当中的 axios 在浏览器中需要 URLSearchParams 的支持

var params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/foo',params);

// 注意： URLSearchParams  有兼容性问题 ios 10.11 以下不支持 需要兼容，请看 dome