Vue常见选项和属性

以你之姓@ 2023-07-25 14:10 6阅读 0赞

# Vue选项 #

## 1. 数据选项 ##

Vue在声明组件时，如果使用了对象类型的data选项，模板将找不到data中被声明的数据。如果使用了支持Vue模板的语法检器，将得到错误的提示“data property in component must be a function”。

## 2. 属性选项 ##

Vue为组件开发提供了属性（props）选项，我们可以使用它为组件注册动态属性，来处理业务之间的差异性，  
使代码可以复用相似的应用场景。

props选项可以是数组或者对象类型，用于接收从父组件传递过来的参数，并允许为其赋默认值、类型检查和跪着校验等。

示例代码如下：

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>属性选项</title>
        </head>
        <body>
        <div id="app">
            <color-text text="Hello World"></color-text>
            <br>
            <color-text></color-text>
            <br>
            <color-text color="#f78" text="Hello World"></color-text>
            <br>
            <color-text color="#43gh" text="Hello World"></color-text>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('color-text',{
                props:{
                    text:String,
                    color:{
                        type:String,
                        default:'#000',     //默认颜色
                        required:true,
                        validator (value) {     //校验规则，判断颜色是否合法
                            return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value);
                        }
                    }
                },
                template:'<span :style="{color:color}">{
       {text}}</span>'
            });
            let app = new Vue({
                el:"#app"
            });
        </script>
        </body>
        </html>

## 3. 方法选项 ##

代码示例如下：

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>方法选项</title>
        </head>
        <body>
        <div id="app">
        
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
        <script type="text/javascript">
            let test1 ={
                msg:'Hello World',
                fun1:function () {
                    console.log('-------普通函数-----',this);
                    console.log(this.msg);
                }
            }
            test1.fun1();
            let test2 ={
                msg:'Hello World',
                fun2: ()=> {
                    console.log('-------箭头函数-----',this);
                    console.log(this.msg);
                }
            }
            test2.fun2();
            let app = new Vue({
                el:"#app",
            });
        </script>
        </body>
        </html>

使用箭头函数定义方法时并不会创建函数作用域，因此this也不会指向其父级实例，此时的this会向上追踪。当找到某个函数作用域时  
this将指向该函数的父级实例，否则this将指向浏览器的内置对象Windows。

## 4. 计算属性 ##

计算属性（computed选项）目的在于减轻模板上的业务负担，当数据链上出现衍生数据时，我们可以利用它去维护使用。

示例代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
    </head>
    <body>
    <div id="app" style="font-family: Roboto,sans-serif;color: #45c0ff;margin-left: 100px">
        <h2>英语中的“互文”</h2>
        <p>案例:</p>
        <p>{
       {message}}.  我看到的是车还是猫。</p>
        <p>{
       {noSpaceMsg}}</p>
        <p>{
       {palindromeMsg}}</p>
        <p>英语中也有“互文”的修辞手法，比如{
       {message}}这句话，</p>
        <p>将句中空格去掉可得 {
       {noSpaceMsg}},</p>
        <p>将句中空格去掉并将其倒序可得 {
       {palindromeMsg}}。</p>
        <p>可看到，{
       {noSpaceMsg}} == {
       {palindromeMsg}}</p>。
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data(){
                return{
                    message:'WAS IT A CAT OR A CAT I SAW'
                }
            },
            computed:{
                noSpaceMsg(){
                    return this.message.replace(/\s/g,'')
                },
                palindromeMsg(){
                    return this.message.replace(/\s/g,'').split('').reverse().join('');
                }
            }
        });
    </script>
    </body>
    </html>

使用了computed之后，组件的代码结构明显清晰了许多，而且即使日后数据的数据处理方式发生了变化，也只需要在选项中修改即可，  
与methods一样，computed不能以箭头函数声明，同时它也会被混入Vue实例，并可通过this调用。

由于计算属性依赖于响应式属性，所以当且仅当响应式属性变化时，计算属性才会被重新计算，因此相比于使用methods函数求值，这种求值的效率更高。

## 5. 侦听属性 ##

Vue可以使用侦听属性（watch属性）为实例添加被观察对象，并在对象被修改时调用开发者自定义的方法。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>侦听属性</title>
    </head>
    <body>
    <div id="app">
        <h2>数据变化之前
            <i style="color: gray;font-size: 14px;">
                * 指令v-once可以限制视图不在响应数据变化
            </i>
        </h2>
        <p v-once>{
       {message}}</p>
        <p v-once>{
       {noSpaceMsg}}</p>
        <h2>数据变化之后</h2>
        <p>{
       {message}}</p>
        <p>{
       {noSpaceMsg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data(){
                return{
                    message:'人有悲欢离合， 月有阴晴圆缺。',
                    noSpaceMsg:'',
                    remoteMsg:'',
                    msg:{
                        sender:'aaa',
                        receiver:'bbb'
                    }
                }
            },
            methods:{
                loginLine(){
                    console.log('----------------------');
                },
                loginMsg(newValue,oldValue){
                    console.log(newValue);
                }
            },
            /*
            watch:{
                message (newValue,oldValue){
                    this.noSpaceMsg = this.message.replace(/\s/g,'');
                }
            }*/
            //异步修改数据
            /*
            watch:{
                message (newValue,oldValue){
                    axios({     //发送ajax异步请求
                        method:'GET',
                        url:'/demo',
                        params:{
                            message:newValue
                        }
                    }).then(res =>{
                        this.remoteMsg = res.data.message //接收响应后异步修改数据值
                    })
                }
            }*/
            //声明式watch
            watch:{
                msg:{
                    handler:'logMsg',        //方法名
                    deep:true,               //深度观察：对任何数据发生变化，watch方法都会被触发
                    immediate:true         //立即调用：在侦听开始时立即调用一次watch方法
                },
                'msg.sender':['logMsg','logLine']   //数组方式，可调用多个方法
            }
        });
    </script>
    </body>
    </html>