<script>
    // 关于 list 操作内容进行封装
const listRelativeEffect = () => {
        const { reactive } = Vue;
        const list = reactive([]);
        const addItemToList = (item) => {
            list.push(item);
        }
        return { list, addItemToList }
    }

    // 关于 input 操作内容进行封装
const inputRelativeEffect = () => {
        const { ref } = Vue;
        const inputValue = ref('');
        const handleInputValueChange = (e) => {
            inputValue.value = e.target.value;
        }
        return { inputValue, handleInputValueChange }
    }
const app = Vue.createApp({
setup() {
            const { list, addItemToList } = listRelativeEffect();
            const { inputValue, handleInputValueChange } = inputRelativeEffect();
            return { 
                list, addItemToList,
                inputValue, handleInputValueChange
            }
        },

    // const app = Vue.createApp({
    //     setup(props, context) {
    //         const { ref, reactive } = Vue;   
    //         const inputValue = ref('');
    //         const list = reactive([]);
    //         const handleInputValueChange = (e) => {
    //             // console.log(e.target.value);
    //             inputValue.value = e.target.value;
    //         }
    //         const handleSubmit = () => {
    //             list.push(inputValue.value);
    //             inputValue.value='';
    //         }
    //         return { 
    //             inputValue,
    //             list,
    //             handleInputValueChange,
    //             handleSubmit,
    //         }
    //     },

template: `
        <div>
            <div>
                <input :value="inputValue" @input="handleInputValueChange" />
                <button @click="()=>addItemToList(inputValue)"> submit </button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key=index>{{item}}</li>
            </ul>
        </div>    
        `,
});

const vm = app.mount('#root');
</script>

​

如果不封装，内容都放一起的话，调用也比较方便。但如果封装的话，要怎么清空input框呢？

const handleSubmit = () => {
​            list.push(inputValue.value);
            inputValue.value='';
        }